调整特定表格单元格的宽度，而不会影响其他单元格

Question

我希望表格的列宽保持在50％，但要像图片中那样调整突出显示的行的大小，而不会影响其他行。

我使用

white-space: nowrap;

已更新

我以此解决了这个问题。

table.border-outline tr:nth-child(2) .table-share-row-even:nth-child(2) .data-column{
    position: absolute;
    white-space: nowrap;
    right: -1px;
}

Answer 1

HTML表的行为是固定的，很难操作。您可以阅读有关此here的更多信息。这就是为什么大多数人不使用table标记来创建表，而是制作一个称为div表的东西的原因-div表是由div标记组成的。您可以使用div表来执行所需的操作，如下所示：

.div-table {
    display: table;
    width: 300px;
}
.div-table-row {
    display: table-row;
    background-color: #ccc;
}
.div-table-row:nth-child(even) {
    background-color: white;
}
.div-table-col {
    float: left;
    display: table-column;
}
.div-table-col:nth-child(odd) {
    width: 20%;
}
.div-table-col:nth-child(even) {
    width: 80%;
    text-align: right;
}

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col">Share Series</div>
    <div class="div-table-col">VEON ADS (NASD)</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">Time</div>
    <div class="div-table-col">02/27/2019 16:00 (GMT-05:00)</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">Currency</div>
    <div class="div-table-col">USD</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">Market</div>
    <div class="div-table-col">NASDAQ</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">ISIN</div>
    <div class="div-table-col">US91822M1062</div>
  </div>
</div>