打破css中一行的表格单元格规则答案

【问题标题】：Break table-cell rule for one row in css打破css中一行的表格单元格规则
【发布时间】：2018-09-13 11:30:54
【问题描述】：

我有一张由<div> 和display:table-row 和table-cell 和position:relative 组成的表格。表中的第一行如下所示

<div style="display:table-row">
    <div style="display:table-cell; position:relative; width: 25% !important;"><strong>Unit price</strong></div>
    <div style="display:table-cell; position:relative; style="width: 25% !important;"><strong>Price basis</strong></div>
    <div style="display:table-cell; position:relative; style="width: 25% !important;"><strong>Delivery date</strong></div>
    <div style="display:table-cell; position:relative; style="width: 25% !important;"><strong>Amount</strong></div>
</div>

下一行具有这些格式，但对于其中的一个，我希望只有一个表格单元格的宽度为整行（100%）。

<div style="display:table-row">
    <div style="display:table-cell; position:relative; width: 100% !important;"><strong>some value</strong></div>
</div>

问题是文本在第一个表格单元格的宽度上换行 (25%)。

我应该如何设置这一行以在整行上展开文本？

【问题讨论】：

标签： html css asp.net

【解决方案1】：

我认为你会想要使用 colspan，你也可能想要使用 css 而不是内联样式。

<td colspan="5">this should go as long as the tables width and not 25%</td>

【讨论】：

【解决方案2】：

display: table-row 不会使行满 100%。并且第一行最后 3 个单元格中的样式不正确。试试这个

<div style="display:list-item;">
    <div style="width: 25% !important; float: left"><strong>Unit price</strong></div>
    <div style="width: 25% !important; float: left"><strong>Price basis</strong></div>
    <div style="width: 25% !important; float: left"><strong>Delivery date</strong></div>
    <div style="width: 25% !important; float: left"><strong>Amount</strong></div>
  </div>
 <div style="display:list-item;">
      <div style="width: 100% !important;"><strong>some value</strong></div>
  </div>

【讨论】：