Question

我想垂直地不扩展我的桌子。请任何人帮我解决这个..这里是我想要的表的设计。

Answer 1

我希望这会帮助你制作你的愿望表。

<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/。

Answer 2

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

<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>

希望这对你有用。

Answer 3

我不确定我理解你想要什么，但尝试输入CSS：

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

这应该有用。

html表不垂直延伸而不是水平延伸

3 个答案: