Question

我有一张这样的桌子

<table>
  <tbody>
    <tr>
      <td>
      </td>
      <td>
      </td>
     </tr>
     <tr>
      <td>
      </td>
      <td>
      </td>
     </tr>
...more rows.

表格将如下所示

|col1|col2|
|col1|col2|
|col1|col2|
|col1|col2|

所有列均沿垂直线的位置。我不希望X行与表的其余部分遵循相同的垂直线，因此它应该看起来像这样

|col1|col2|
|col1|col2|
|this row should not follow the same vertical lines|col2|
|col1|col2|

有什么办法可以使用CSS吗？

Answer 1

唯一的方法是要么完全不使用HTML中的表标签，要么不使用它们，而是将display: block应用于所有table，{{1 }}和tr元素，并将td固定为所有这些元素。（但是，这使得使用表标签毫无意义）

Answer 2

在这种情况下，忽略table，您可以使用flex or float模拟表的外观和风格，看看下面的工作代码段（使用bootstrap 4），希望对您有所帮助：）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col border col-auto">col1</div>
    <div class="col border col-auto">col2</div>
  </div>
  <div class="row">
    <div class="col border col-auto">col1</div>
    <div class="col border col-auto">col2</div>
  </div>
  <div class="row">
    <div class="col border col-auto">this row should not follow the same vertical lines</div>
    <div class="col border col-auto">col2</div>
  </div>
  <div class="row">
    <div class="col border col-auto">col1</div>
    <div class="col border col-auto">col2</div>
  </div>
</div>

CSS格式化表格的行和列的宽度

2 个答案: