對齊表格行

Question

我想將文本與項目符號放在同步位置。但是當我使用文本對齊：中心;結果看起來不好。我怎麼能把子彈放在另一個之上，但又是在行的中心？

https://jsfiddle.net/w7eekbcL/2/

<td> 
    <table style="width:100%"> 
      <tr> 
       <td colspan="2" style="font-family:verdana; color:#424242">main list</td> 
      </tr> 
      <tr> 
       <td colspan="2">list</td> 
      </tr> 
      <tr> 
       <td colspan="2">&bull; one</td> 
      </tr> 
      <tr> 
       <td colspan="2">&bull; second</td> 
      </tr> 
      <tr> 
       <td colspan="2">&bull; thurd</td> 
      </tr> 
     </table> 
</td> 

http://i.stack.imgur.com/26sP6.png

Answer 1

你真的不能兼得，中心和要點obove另一個..

嘗試是這樣的：

JSFiddle

y OU可以調整，通過編輯填充左

table, th, td { 
border: 1px solid black; 
text-align:left; 
} 

.left-padding{ 
    padding-left: 5%; 
} 

Answer 2

嘗試使用align-text:left

table, th, td { 
 
    border: 1px solid black; 
 
    text-align:left; 
 
    padding:3px 20px; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
    <td colspan="3" bgcolor="#A4A4A4">top text</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <table style="width:100%"> 
 
       <tr> 
 
        <td colspan="2" style="font-family:verdana; color:#424242">main list</td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2">list</td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2">&bull; one</td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2">&bull; second</td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2">&bull; thurd</td> 
 
       </tr> 
 
      </table> 
 
    </td> 
 
    <td> 
 
     <table style="width:100%"> 
 
       <tr> 
 
        <td colspan="3" style="font-family:verdana; color:#424242">main list</td> 
 
       </tr> 
 
       <tr> 
 
        <td>for test one</td> 
 
        <td>and test second</td> 
 
        <td>1 test threee</td> 
 
        
 
       </tr> 
 
       <tr> 
 
        <td>&bull; test test four</td> 
 
        <td>&bull; test 2 four</td> 
 
        <td>&bull; test 4 four</td> 
 
       </tr> 
 
       <tr> 
 
        <td>&bull; tests software </td> 
 
        <td>&bull; software table</td> 
 
        <td>&bull; test 7 four</td> 
 

 

 
       </tr> 
 
       <tr> 
 
        <td>&bull; test 8 four</td> 
 
        <td>&bull; test 3 four</td> 
 
        <td></td> 
 
       </tr> 
 
       <tr> 
 
        <td> </td> 
 
        <td>&bull; test and four</td> 
 
        <td> </td> 
 
       </tr> 
 
       
 

 
      </table> 
 
    </td> \t \t 
 

 
    </tr> 
 
    <tr> 
 
    <td colspan="3" bgcolor="#D8D8D8">bottom text</td> 
 
    </tr> 
 
</table>

Updated fiddle

Answer 3

有點哈克但是當需要時，你可以做一些事情如：

<td colspan="2" class="left-padding"><div>&bull; one</div></td> 

td div { 
    display: block; 
    margin: 0 auto; 
    width: 60%; 
} 

使用填充作爲其他人的回答是一個很好的選擇，但也使排列困難的表更難。

Answer 4

如果你有這種嚴格的HTML代碼，比你能不能做到這一點與純CSS，你會需要一些JavaScript魔術：

1. CSS：文本對齊：左;
2. JS：padding-left：計算值，基於單元格寬度和列中最長的列表項。這並不那麼簡單，因爲表格元素的層次結構。

另一種方式是將 每個項目符號列表應該是在一個細胞，含有UL和李

table, tr, th, td{ 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    } 
 

 
ul { 
 
    display: inline-block; 
 
    text-align: left; 
 
    padding-left:0px; 
 
    margin:0px; 
 
    }

<table> 
 
    <tr> 
 
    <th> 
 
     Very long title text 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     </ul> 
 
    </td> 
 
    </tr> 
 
</table>

在你將與另一個問題面臨這種情況：水平線點之間（背景html？）。所以JavaScript是真正的答案，如果你可以編碼。