对齐表格行

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是真正的答案，如果你可以编码。