HTML 表格样式宽度

Question

我正在尝试在顶部有空白的行，我希望它与玻璃瓶和玻璃瓶成为一行，玻璃瓶和瓶子一直在全尺寸页面的右侧。我不希望台词打断文字。执行此操作的最佳方法是什么？

我尝试使用   但没有成功。我的 HTML 与 CSS Hook ，我应该通过 CSS 来实现吗？我不是 100% 确定我是如何猜测 table { blank } 的？

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #aabcfe;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #aabcfe;
  color: #669;
  background-color: #e8edff;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #aabcfe;
  color: #039;
  background-color: #b9c9fe;
}

.tg .tg-hmp3 {
  background-color: #D3D3D3;
  text-align: left;
  vertical-align: top;
}

.tg .tg-baqh {
  background-color: #FFFFFF text-align:right;
  vertical-align: top;
}

.tg .tg-mb3i {
  background-color: #D2E4FC;
  text-align: right;
  vertical-align: top;
}

.tg .tg-lqy6 {
  text-align: right;
  vertical-align: top;
}

.tg .tg-0lax {
  background-color: #FFFFFF;
  text-align: left;
  vertical-align: top
}

<table class="tg">

  <tr class="lightgrey">
    <td style="width:77%"><b>&nbsp;</b></td>
    <td style="width:11%"><b>Glass</b></td>
    <td style="width:12%"><b>Bottle</b></td>


  </tr>
  <tr>
    <td class="tg-0lax">Riserva Chianti Classico, Tan Label, Ruffino</td>
  </tr>
  <tr>
    <td class="tg-hmp3">Chianti Classico, Gabbiano, Tan</td>
  </tr>
  <tr>
    <td class="tg-0lax">Riserva Chianti Classico La Selvanella Melini</td>
  </tr>
  <tr>
    <td class="tg-hmp3">Cannonau Di Sardenga, Soletta</td>
  </tr>
  <tr>
    <td class="tg-0lax">Amarone, Sartori</td>
  </tr>
  <tr>
    <td class="tg-hmp3">Valpolicella Classico, Le Poiane</td>
  </tr>
  <tr>
    <td class="tg-O1ax">Centine Rosso, Castello Banfi</td>
  </tr>
  <tr>
    <td class="tg-hmp3">Brunello di Montaccino, Banfi</td>
  </tr>
  <tr>
    <td class="tg-O1ax">Chianti Classico, San Felice</td>
  </tr>
  <tr>
    <td class="tg-hmp3">Barolo di Saralunga, Fontanafredda</td>
  </tr>
  <tr>
    <td class="tg-O1ax">Costera Rossa, Argiolas</td>
  </tr>
  <tr>
    <th class="tg-baqh" colspan="6">Italian White</th>
  </tr>
</table>

Answer 1

像这样添加列:

<td class="tg-0lax">&nbsp;</td>

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #aabcfe;
  width: 100%;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #aabcfe;
  color: #669;
  background-color: #e8edff;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #aabcfe;
  color: #039;
  background-color: #b9c9fe;
}

.tg .tg-hmp3 {
  background-color: #D3D3D3;
  text-align: left;
  vertical-align: top;
}

.tg .tg-baqh {
  background-color: #FFFFFF text-align:right;
  vertical-align: top;
}

.tg .tg-mb3i {
  background-color: #D2E4FC;
  text-align: right;
  vertical-align: top;
}

.tg .tg-lqy6 {
  text-align: right;
  vertical-align: top;
}

.tg .tg-0lax {
  background-color: #FFFFFF;
  text-align: left;
  vertical-align: top
}

th.product ,
td.product {
  width:77%;
  border-right:0px;
}

th.bottle,
td.bottle {
  width:12%;
  border-left:0px;
}

th.glass,
td.glass {
  width:11%;
  border-left:0px;
  border-right:0px;
}

th {
  font-weight:bold;
}

<table class="tg">

  <tr class="lightgrey">
    <th class"product">&nbsp;</th>
    <th class"glass">Glass</b></th>
    <th class"bottle">Bottle</th>
  </tr>

  <tr>
    <td class="tg-0lax product">Riserva Chianti Classico, Tan Label, Ruffino</td>
    <td class="tg-0lax glass">&nbsp;</td>
    <td class="tg-0lax bottle">&nbsp;</td>
  </tr>
</table>