Question

是否有更优雅的解决方案可以达到与此相同的效果？

HTML table with different cell widths in one column

到目前为止，我得到的代码是：

<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
    <style type="text/css">
      table { border-collapse: collapse; }
      td { border: solid 1px; }
      td.nest { padding: 0px; }
      td.nest table td { border-width: 0px 1px; }
      td.nest table td:first-child { border-left: none; }
      td.nest table td:last-child { border-right: none; }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="width: 3em;"/>
        <col style="width: 6em;"/>
        <col style="width: 9em;"/>
      </colgroup>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><!-- Somehow get rid of the nested table and keep just the tds -->
        <td class="nest" colspan="3">
          <table>
            <tr>
              <td style="width: 4em;">1</td>
              <td style="width: 6em;">2</td>
              <td style="width: 8em;">3</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
  </body>
</html>

到目前为止，我能够完成这项工作的唯一方法是在第一个中嵌入另一个表。我不喜欢它，因为理想情况下我只需要一个表，并且有很多额外的CSS来匹配第一个表的边框而不添加单元格（colspan="3"）的大小。我希望能够使用普通<tr>替换嵌套表，其中包含三个<td>。

我发现改变一个单元格宽度而不影响列中其他单元格的唯一方法是使用position: absolute;但是然后行中的下一个单元格向左移动了宽度调整后的细胞，因此不能完全发挥作用。这也很难让宽度恰到好处。

那么，有没有办法只使用一个表来获得相同的效果，没有额外的<div>等等，只是简单的CSS？此示例应该只有一个<table>，九个<td>和colspan= s。我正在寻找一个纯CSS解决方案，如果存在。它应该能够处理任何宽度，只要它们加起来是原始宽度。

Answer 1

不，没有子表，这是不可能的您要做的是反对表格数据表示的想法。
如果您不想要桌子，请不要使用桌子
但是，您可以使用style="display: table-cell;"将数据放入div中。

再想一想，你可以在所有3行中使用colspan 所以你的桌子实际上是这样的：

Colspan

 <col style="width: 3em;"/>
 <col style="width: 1em;"/>
 <col style="width: 5em;"/>
 <col style="width: 1em;"/>
 <col style="width: 8em;"/>




<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
      <style type="text/css">
          table {
              border-collapse: collapse;
          }

          td {
              border: solid 1px;
          }

        td.nest {
            padding: 0px;
        }

        td.nest table td {
            border-width: 0px 1px;
        }

        td.nest table td:first-child {
            border-left: none;
        }

        td.nest table td:last-child {
            border-right: none;
        }
    </style>
</head>
<body>

    <table >
        <colgroup>
            <col style="width: 3em;" />
            <col style="width: 1em;" />
            <col style="width: 5em;" />
            <col style="width: 1em;" />
            <col style="width: 8em;" />
        </colgroup>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
    </table>

</body>
</html>

Answer 2

是 ...但你必须使用一些CSS技巧来“伪造”它。

以下内容是对内边框使用psuedo元素，将它们偏移为适合中间行。

Demo Fiddle

CSS

  table {
      border-collapse: collapse;
      table-layout:fixed;
  }
  td {
      border: solid 1px;
      border-width:1px 0px 1px 0px;
      width:33%;
      position:relative;
  }
  td:nth-child(1) {
      border-left:solid 1px;
  }
  td.nest {
      padding: 0px;
  }
  td.nest table td {
      border-width: 0px 1px;
  }
  td.nest table td:first-child {
      border-left: none;
  }
  td.nest table td:last-child {
      border-right: none;
  }
  td:after {
      content:'';
      position:absolute;
      right:0;
      border-right:1px solid black;
      top:0;
      bottom:0;
  }
  tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
      right:-20px;
  }
  tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
      padding-left:25px;
  }

HTML

<table>
    <colgroup>
        <col style="width: 3em;" />
        <col style="width: 6em;" />
        <col style="width: 9em;" />
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Answer 3

你可以简单地使用它......

 <table>
      <tr>
    <td style="width:100px"></td>
    <td style="width:300px"></td>
    <td></td>
  </tr>
    </table>

第一列的宽度为100px，第二列的宽度为300px，最后一列的宽度为

Answer 4

您可以使用下一个html：

<table style="width: 300px;">
    <colgroup>
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
    </colgroup>
    <tbody>
        <tr>
            <td></td>
            <td colspan="3"></td>
            <td colspan="2"></td>            
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>       
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>      
        </tr>
    </tbody>
</table>

Answer 5

对于我来说，您必须使用单位％而不是像素。

width:30%

HTML表格 - 更改列中单个单元格的宽度

5 个答案:

Demo Fiddle