0

我有一张桌子，里面有 3 列和一个头。像这样：

在此处输入图像描述

这是我的html代码：

            <table>
                <thead>
                    <tr>
                        <th class="right"><input type = "checkbox"></th>
                        <th class="left">Afficher: Tous blah blah</th>                            
                        <th class="right">Trier par: Numéro</th>
                    </tr>
                </thead>

                <tbody>
                    <tr><td class="right"><input type="checkbox"></td><td class="left">12/00119</td><td class="left">XXXX XXXX XXXX XXXXXXX XXXXXXXX XXXXXX</td></tr>
                    <tr><td class="right"><input type="checkbox"></td></td><td class="left">12/00120</td><td class="left">YYYYYY YYYYYY YYYYYYYY YYYYYYY YYYYYYY</td></tr>
                    ...

如您所见，标题第二列中的文本比其下方行的内容宽得多。所以标题文本被换行。请注意，标题的第三列是右对齐。

我的问题：是否可以让标题文本（第 2 列）继续在同一行但不扩展表格主行的相应列。

这是我想要实现的目标：

在此处输入图像描述

谢谢。

4

2 回答 2

0

根据我对表格的理解，您尝试做的事情是不可能的。

现在，您可以拆分列，然后使用 colspan 重新加入它们，但将标题移出表格可能是一个更好的主意？

http://jsfiddle.net/5fTDk/

      <table>
            <thead>
                <tr>
                    <th class="right"><input type = "checkbox"></th>
                    <th colspan="2" class="left nobr">Afficher: Tous asdasd asd blah blah <div>Trier par: Numéro</div></th>                            

                </tr>
            </thead>

            <tbody>
                <tr>
                <td class="right"><input type="checkbox"></td>
                <td  class="left date">12/00119</td>
                <td  class="left content">XXXX XXXX XXXX XXXXXXX XXXXXXXX XXXXXX</td></tr>    ...
                </tbody>
                </table>
于 2013-01-26T15:49:07.140 回答
0 
<head>
  <style>
    /*rest styles here*/
    th.left {
      min-width:40px;
      max-width:60px;
    }
  </style>
</head>
<body>
<!-- rest code here -->
  <th class="left">Afficher: Tous blah blah</th>
于 2013-01-26T15:55:37.367 回答