将 table 行布局更改为 css

Question

我有一个table

<table>
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

我需要做的是使用[将整个table显示为单列CSS

输出应该是：

 +---------+
 | Cell A1 |
 +---------+
 | Cell A2 |
 +---------+
 | Cell A3 |
 +---------+
 | Cell B1 |
 +---------+
 | Cell B2 |
 +---------+
 | Cell B3 |
 +---------+

这背后的原因是每个 table 单元格都非常宽，并且 table 是由 CouchCMS 在其管理面板中生成的。

Answer 1

只需添加一点点 CSS 即可将 table 中的每个元素显示为 block，并隐藏您的 thead:

table,
tr,
td {
  display: block;
}

thead {
  display: none;
}

<table>
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

JSFIDDLE：http://jsfiddle.net/ghorg12110/k8pojm31/

Answer 2

尝试这套 css 规则

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
tbody,
thead,tr {
  display: block;
}
th,
td {
  padding: 4px;
  display: block;
}

<table border="1">
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

Answer 3

如果要显示单列，则不要使用多个，如果需要列标题，则使用单个标签，但如果不需要列标题，则试试这个代码：

<html>
<head>
<style>
span{
color:#019ac8;

}
table{
border:1px dotted #000;
}

</style>

</head>
<body>
<table>

  <tbody>
    <tr>
      <td><span>Cell</span> A1</td></tr>
      <tr><td><span>Cell</span> A2</td></tr>
      <tr><td><span>Cell</span> A3</td>
    </tr>
    <tr>
      <td><span>Cell</span> B1</td></tr>
      <tr><td><span>Cell</span> B2</td></tr>
     </tr> <td><span>Cell</span> B3</td>
    </tr>
  </tbody>
</table>
</body>
</html>

在此处输入代码

将 table 行布局更改为 css

Change table row layout with css

css

responsive-design

couch-cms