扩展表头的第 1 列答案

【问题标题】：Expanding the 1st col of the head of my table扩展表头的第 1 列
【发布时间】：2013-01-27 00:01:01
【问题描述】：

我有一张桌子，里面有 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>
                    ...

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

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

这是我想要实现的目标：

谢谢。

【问题讨论】：

jsfiddls: jsfiddle.net/bm2Yh/1

标签： html css

【解决方案1】：

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

现在，您可以拆分列，然后使用 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>

【讨论】：

也许不可能，我不知道，这就是为什么我在这里问这个问题......无论如何，谢谢。
看小提琴，我认为最好这样做

【解决方案2】：

<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>

【讨论】：

如果我按照您的建议进行操作，则会调整整个列的大小，我不希望这样。我想保持我的 2nd col body table 的实际宽度（见我的第二张图片）。
然后使用最小宽度和最大宽度
jsfiddle.net/bm2Yh/11 - 我认为您将不得不为此添加另一个表格，或者在顶部添加一个与您提供的表格相同的 div