可滚动和对齐的 CSS 表格答案

【问题标题】：Scrollable and aligned CSS table可滚动和对齐的 CSS 表格
【发布时间】：2018-11-22 23:48:52
【问题描述】：

我有一个简单的，我想要一个列对齐的可滚动表格。

我试过这个（来自https://stackoverflow.com/a/11483686/1599054）：

<table>
    <thead>
        <tr><th>loooooooooooooong</th><th>headers</th></tr>
    </thead>
    <tbody>
        <tr><td>t</td><td>t</td></tr>
        <tr><td>t</td><td>t</td></tr>
        <tr><td>t</td><td>t</td></tr>
    </tbody> </table>

还有 CSS：

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; }
td { height:50px; background:blue; margin:0px; cell-spacing:0px;}

你可以在这里看到它：http://jsfiddle.net/Rfgm2/1/

我的问题是我的内容小但标题大，它们是“动态”对齐它们的手段吗？

【问题讨论】：

stackoverflow.com/questions/673153/…

标签： html css html-table

【解决方案1】：

我为您找到了一个可行的示例。您必须使用div 和table 的组合来实现此目的：

<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th width="50%" style="word-wrap:break-word;">Short heading</th>
            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:325px; height:48px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

jsFiddle 在这里：http://jsfiddle.net/2ZnWL/1/

【讨论】：

如果我这样做，我会松开卷轴。
能否请您准确指出您所做的更改？它使您的答案对其他人更有用。

【解决方案2】：

从thead 和tbody 中删除display: block; 你把这些元素的默认样式放在那里是搞乱了。

Fiddle

【讨论】：

如果我这样做，我会松开卷轴。