html表格垂直而不是水平扩展答案

【问题标题】：html table extend vertically not horizontallyhtml表格垂直而不是水平扩展
【发布时间】：2017-12-18 03:58:36
【问题描述】：

我想垂直而不是水平扩展我的表格。请任何人帮我解决这个问题。这是我想要的桌子设计。

【问题讨论】：

你有代码示例吗？

【解决方案1】：

我不确定我是否理解您想要的内容，但请尝试在 CSS 中添加如下内容：

  table tr th{
     width:100px !important;
     min-width:100px!important; //optional
     max-width:100px !important; //optional
     height:auto;
  }

这应该可以工作。

【讨论】：

【解决方案2】：

我希望这将帮助您制作您的愿望表。

<table class="table-bordered text-center" cellpadding="10">
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
    <th rowspan="100" scope="rowgroup">Fourniture</th>
    <th rowspan="2" scope="rowgroup"></th>
    <th colspan="4" scope="colgroup">2017</th>
    <th colspan="4" scope="colgroup">2016</th>
    <th rowspan="2" scope="rowgroup">total</th>
</tr>
<tr>
    <th colspan="1" scope="colgroup">jan</th>
    <th colspan="1" scope="colgroup">feb</th>
    <th colspan="1" scope="colgroup">mar</th>
    <th colspan="1" scope="colgroup">mar</th>
    <th colspan="1" scope="colgroup">april</th>
    <th colspan="1" scope="colgroup">may</th>
    <th colspan="1" scope="colgroup">june</th>
    <th colspan="1" scope="colgroup">july</th>
</tr>
<tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
</tr>
<tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
    <td>80,000</td>
</tr>
<tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
</tr>
<tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
</tr>
<tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
</tr>
<tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
    <td>9,000</td>
</tr>

这是一个运行示例：https://jsfiddle.net/Haider_alee/1vunp5bo/1/。

【讨论】：

【解决方案3】：

让我们试试这个，只需改变列的高度并保持原来的宽度。

<table>
  <tr>
    <th height="100">Month</th>
    <th height="100">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

希望这对你有用。

【讨论】：