当子单元格不跨越表格的整个宽度时，如何使表格行扩展到100％宽度（包含图片）

Question

我找到的唯一解决方案是用空表格单元格填写表格（显示在TensorFlow和ROW1）

ROW7到ROW3只包含一个不超出整个表宽度的表格单元格。我已经尝试了一个固定的布局表，我可以在桌面行上想到的所有内容，以便在没有运气的情况下将其填充到100％的宽度。

我需要行为全宽的原因是我可以在行上显示顶部和底部边框，跨越表格的整个宽度。

我正在为客户端更新软件，必须使用表格，并且必须找到与Internet Explorer 10最低兼容的解决方案。

所有与表相关的元素都使用其自然显示类型ROW6，table和table-row

行以编程方式生成，而colspan是一个有问题的解决方案。

感谢您的阅读。

Answer 1

在细胞上应用colspan：

＆＃13;

＆＃13;

<table border="1">
	<tr>
		<td>oi</td>
		<td>oi</td>
		<td>oi</td>
		<td>oi</td>
		<td>oi</td>
	</tr>
	<tr>
		<td colspan="5">oi</td>
	</tr>
	<tr>
		<td>oi</td>
		<td>oi</td>
		<td>oi</td>
		<td>oi</td>
		<td>oi</td>
	</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您无法在表格行上应用边框，但可以应用大纲：

tr {
  outline: 1px solid black;
}

示例1：

＆＃13;

＆＃13;

table {
  border: 1px solid black;
  border-spacing: 0; 
  empty-cells: show;
}

td, th {
  padding: 0.5em;
  border-right: 1px solid #ddd;
}

tr {
  outline: 1px solid black;
}

＆＃13;

<table>
  <tr><th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
      <th>Col 7</th>
  </tr>
  <tr><td>Row1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr><td>Row2</td>
  </tr>
  <tr><td>Row3</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

正如您在评论中指出的那样，轮廓围绕着整个元素。

要在行的底部有一个边框，请将其放在伪元素上：

table {
  position: relative;             /* pseudo-element will be based on the table's position */
  overflow: hidden;               /* don't let the pseudo-element overflow the table */
}

tr:before {
  content: '';                    /* required for rendering */
  position: absolute;             /* absolute positioned */
  width: 100%;                    /* span the entire table */
  border-bottom: 1px solid black; /* the magic border */
}

示例2：

＆＃13;

＆＃13;

table {
  border: 1px solid black;
  border-spacing: 0; 
  empty-cells: show;
}

td, th {
  padding: 0.5em;
  border-right: 1px solid #ddd;
}

table {
  position: relative;               /* the pseudo-element will be based on the table */
  overflow: hidden;                 /* don't let the pseudo-element overflow */
}

tr:before {
  content: '';                      /* required for rendering */
  position: absolute;               /* absolute positioned */
  width: 100%;                      /* span the entire table */
  border-bottom: 1px solid black;   /* the magic border */
}

＆＃13;

<table>
  <tr><th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
      <th>Col 7</th>
  </tr>
  <tr><td>Row1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr><td>Row2</td>
  </tr>
  <tr><td>Row3</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;