HTML表格以列式方式呈现

Question

我有这个基本表，我想以这样的方式呈现行元素，它应该以垂直顺序呈现。 <td>内的每个<tr>都应按垂直顺序打印。

CSS和HTML：

＆＃13;

＆＃13;

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0}
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;}
table.spec-table tr:nth-child(even) {background: #ddd}
table.spec-table tr:nth-child(odd)  {background: #eee}
table.spec-table tr:first-child     {background: #666; color: #fff; font-weight: bold}
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;}

＆＃13;

<table class="spec-table" id="here_table">
  <tr>
    <th colspan='4'>Single Mode</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>feature1</td>
    <td>feature2</td>
    <td>feature3</td>
  </tr>
  <tr>
    <td>value1</td>
    <td>value2</td>
    <td>value3</td>
    <td>value4</td>
  </tr>
  <tr>
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

为了完成这项任务，我只是按预期添加了两个CSS属性及其渲染，但表格设计分散了。

＆＃13;

＆＃13;

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0}
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;}
table.spec-table tr:nth-child(even) {background: #ddd}
table.spec-table tr:nth-child(odd)  {background: #eee}
table.spec-table tr:first-child     {background: #666; color: #fff; font-weight: bold}
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;}

tr.orientation { display: inline-block;}
tr.orientation th, tr.orientation td { display:block;  }

＆＃13;

<table class="spec-table" id="here_table">
  <tr>
    <th colspan='4'>Single Mode</th>
  </tr>
  <tr class="orientation">
    <td>&nbsp;</td>
    <td>feature1</td>
    <td>feature2</td>
    <td>feature3</td>
  </tr>
  <tr class="orientation">
    <td>value1</td>
    <td>value2</td>
    <td>value3</td>
    <td>value4</td>
  </tr>
  <tr class="orientation">
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

有人可以帮我修改表格设计，看起来像以前一样。

Answer 1

试试这个：

＆＃13;

＆＃13;

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0}
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;}
table.spec-table tr td:nth-child(even) {background: #ddd}
table.spec-table tr td:nth-child(odd) {background: #eee}
table.spec-table tr:first-child {background: #666; color: #fff; font-weight: bold}
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;}

tr.orientation { display: table-cell;}
tr.orientation th, tr.orientation td {     
  display: grid;
  border-bottom: 2px solid #fff;
}

＆＃13;

<table class="spec-table" id="here_table">
  <tr>
    <th colspan='4'>Single Mode</th>
  </tr>
  <tr class="orientation">
    <td>&nbsp;</td>
    <td>feature1</td>
    <td>feature2</td>
    <td>feature3</td>
  </tr>
  <tr class="orientation">
    <td>value1</td>
    <td>value2</td>
    <td>value3</td>
    <td>value4</td>
  </tr>
  <tr class="orientation">
    <td>test1</td>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需更新你的css：

if

Answer 3

这是你的意思吗？

＆＃13;

＆＃13;

table{
  width:100%; 
  border:1px solid #ddd;
}
table tr td, table tr th{
  border:1px solid #ddd;
}

＆＃13;

<table>
  <thead>
    <tr><th colspan="3">Single Mode</th></tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>value1</td>
      <td>test1</td>
    </tr>
    <tr>
      <td>feature1</td>
      <td>value2</td>
      <td>test2</td>
    </tr>
    <tr>
      <td>feature2</td>
      <td>value3</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>feature3</td>
      <td>value4</td>
      <td>test4</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

Long

＆＃13;

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0}
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;}
table.spec-table tr:nth-child(even) {background: #ddd}
table.spec-table tr:nth-child(odd)  {background: #eee}
table.spec-table tr:first-child     {background: #666; color: #fff; font-weight: bold}
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;}

tr.orientation { display: inline-block;width:100%;}
tr.orientation th, tr.orientation td { display:block;width: 21%;float: left;}

＆＃13;

＆＃13;

＆＃13;