Question

这是我的代码：http://jsfiddle.net/spadez/mVX93/13/

我正试图在我的桌子顶部放一个标题，它一直延伸到一边。我认为是这样做的方式。

<table id="my-table">
    <tr>
        <th>Test</th>
        <td><span class="lrg">10</span>1</td>
        <td><span class="lrg">7</span>1</td>
        <td><span class="lrg">3</span>1</td>
        <td><span class="lrg">1</span>1</td>
    </tr>
</table>

什么是正确的方法？

Answer 1

尝试：

<table id="my-table">
    <tr>
        <th colspan="4">Test</th>
    </tr>
    <tr>
        <td><span class="lrg">10</span>1</td>
        <td><span class="lrg">7</span>1</td>
        <td><span class="lrg">3</span>1</td>
        <td><span class="lrg">1</span>1</td>
    </tr>
</table>

Answer 2

据我所知，

你可以使用这种方法

<table id="my-table">
    <tr>
       <th colspan="4">Test</th>
    </tr>
    <tr>
      <td><span class="lrg">10</span>1</td>
      <td><span class="lrg">7</span>1</td>
      <td><span class="lrg">3</span>1</td>
      <td><span class="lrg">1</span>1</td>
    </tr>
 </table>

col span将允许您跨越四列

Answer 3

你真的想要使用＆＃34;标题＆＃34;如thead和th？

我从你的问题和评论中看到你想要一个＆＃34;标题＆＃34;在表格的顶部，与表格一样宽，与列无关。

一个简单的caption用CSS正确设置样式，不起作用吗？

演示：http://jsfiddle.net/mVX93/15/

Answer 4

你真的应该使用caption。

<table id="my-table">
    <caption>Heading</caption>
    <tbody>
        <tr>
            <td><span class="lrg">10</span>1</td>
            <td><span class="lrg">7</span>1</td>
            <td><span class="lrg">3</span>1</td>
            <td><span class="lrg">1</span>1</td>
        </tr>
    <tbody>
</table>

把标题放在桌子上

4 个答案: