html - 使表格单元格适合包含许多列的表格中的内容

标签 html css html-table

我的表格有很多列，我希望这些列适合它们的最大单元格内容。

如果我只有几列，它可以正常工作，但如果我有很多列，它就不起作用。我希望每一行都在一行中。

.rTable {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.rTableCell,
.rTableCellError,
.rTableHead {
  display: table-cell;
  padding: 3px 10px;
  border: 1px solid #999999;
}
<table class="rTable" style="width:100%">
  <thead class="rTableHeading">
    <tr class="rTableRow">
      <th class="rTableHead"># Time</th>
      <th class="rTableHead">Exec Status</th>
      <th class="rTableHead">Fail Reason</th>
      <th class="rTableHead">Temp Sensor</th>
      <th class="rTableHead">SvDrop Version</th>
      <th class="rTableHead">Band</th>
      <th class="rTableHead">Measured current</th>
      <th class="rTableHead">#i</th>
      <th class="rTableHead">Temperature</th>
      <th class="rTableHead">Power Supply 1.8 Voltage I</th>
      <th class="rTableHead">Power Supply 1.8 Voltage II</th>
      <th class="rTableHead">Power Supply 3.3 Voltage I</th>
      <th class="rTableHead">Power Supply 3.3 Voltage II</th>
      <th class="rTableHead">Power Supply 1.24 Voltage</th>
      <th class="rTableHead">Power Supply 1 Voltage</th>
      <th class="rTableHead">Chain</th>
      <th class="rTableHead">Additional Chain</th>
      <th class="rTableHead">BB Filter</th>
      <th class="rTableHead">Current Mode</th>
      <th class="rTableHead">PA IntrExtrSelect</th>
      <th class="rTableHead">MixerFreqTune</th>
      <th class="rTableHead">PA DRV Gain</th>
      <th class="rTableHead">PA Core</th>
      <th class="rTableHead">Mixer Gain</th>
      <th class="rTableHead">Frequency [MHz]</th>
      <th class="rTableHead">AbortTimeout</th>
      <th class="rTableHead">Signal Tx Type</th>
      <th class="rTableHead">POUT-Limit-0</th>
      <th class="rTableHead">POUT-Limit-1</th>
      <th class="rTableHead">POUT-Limit-2</th>
      <th class="rTableHead">POUT-Limit-3</th>
      <th class="rTableHead">calibration summary</th>
      <th class="rTableHead">CablesLoss</th>
      <th class="rTableHead">BB CableLoss</th>
      <th class="rTableHead">ProjectLoss</th>
      <th class="rTableHead">BB ProjectLoss</th>
      <th class="rTableHead">XTAL_X1</th>
      <th class="rTableHead">XTAL_X2</th>
      <th class="rTableHead">Band Gap</th>
      <th class="rTableHead">RTRIM</th>
      <th class="rTableHead">LO_iDC</th>
      <th class="rTableHead">LO_qDC</th>
      <th class="rTableHead">IQ_IQAMP</th>
      <th class="rTableHead">IQ_IQPHASE</th>
      <th class="rTableHead">Calibration Captune</th>
      <th class="rTableHead">TimeSkew</th>
      <th class="rTableHead">PLL Lock</th>
      <th class="rTableHead">POUT [dBm]</th>
      <th class="rTableHead">LO-Leakage [dBc]</th>
      <th class="rTableHead">LO-Leakage [dBm]</th>
      <th class="rTableHead">IQ-Imbalance [dBc]</th>
      <th class="rTableHead">IQ-Imbalance [dBm]</th>
      <th class="rTableHead">DVM Current [mA]</th>
      <th class="rTableHead">Tx Gain</th>
    </tr>
  </thead>
  <tbody class="rTableBody">
    <tr class="rTableRow ">
      <td class="rTableCell">12:19:22</td>
      <td class="rTableCell">OK</td>
      <td class="rTableCell"></td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">Low</td>
      <td class="rTableCell">1.2956</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">Ch1</td>
      <td class="rTableCell">NONE</td>
      <td class="rTableCell">WBPAPD</td>
      <td class="rTableCell">Hi</td>
      <td class="rTableCell">Internal</td>
      <td class="rTableCell">9</td>
      <td class="rTableCell">Full_Core</td>
      <td class="rTableCell">Full_Core</td>
      <td class="rTableCell">_0dB</td>
      <td class="rTableCell">_2412_Ch1_g</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">Dac</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">{WiFiCableLoss : (CablesLoss : -7.013)}{DBoardLoss : (ProjectLoss : -0.835137789)}{CrystalCalibration : (XTAL_X1 : 463)(XTAL_X2 : 463) defult}{BandGapBuff : (Band Gap : 0.6) defult}{Rtrim : (RTRIM : 32) defult}{TxLoCalibration : (LO_iDC : 0)(LO_qDC
        : 0) defult}{TxIQMismatch : (IQ_IQAMP : 0)(IQ_IQPHASE : 0) defult}{TxMixerCap : (MixerFreqTune : 9)}</td>
      <td class="rTableCell">-7.013</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">-0.835137789</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">463</td>
      <td class="rTableCell">463</td>
      <td class="rTableCell">0.6</td>
      <td class="rTableCell">32</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">Yes</td>
      <td class="rTableCell">-4.4350</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCellError">31.6733 &#8214; [ > 35 ]</td>
    </tr>
    <tr class="rTableRow ">
      <td class="rTableCell">12:19:23</td>
      <td class="rTableCell">OK</td>
      <td class="rTableCell"></td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">Hi</td>
      <td class="rTableCell">1.3091</td>
      <td class="rTableCell">1</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">null</td>
      <td class="rTableCell">Ch1</td>
      <td class="rTableCell">NONE</td>
      <td class="rTableCell">WBPAPD</td>
      <td class="rTableCell">Hi</td>
      <td class="rTableCell">Internal</td>
      <td class="rTableCell">8</td>
      <td class="rTableCell">Full_Core</td>
      <td class="rTableCell">Full_Core</td>
      <td class="rTableCell">_0dB</td>
      <td class="rTableCell">_5500_Ch100_a</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">Dac</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">{WiFiCableLoss : (CablesLoss : -10.578)}{DBoardLoss : (ProjectLoss : -0.67644533)}{CrystalCalibration : (XTAL_X1 : 463)(XTAL_X2 : 463) defult}{BandGapBuff : (Band Gap : 0.6) defult}{Rtrim : (RTRIM : 32) defult}{TxLoCalibration : (LO_iDC : 0)(LO_qDC
        : 0) defult}{TxIQMismatch : (IQ_IQAMP : 0)(IQ_IQPHASE : 0) defult}{TxMixerCap : (MixerFreqTune : 8) defult}</td>
      <td class="rTableCell">-10.578</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">-0.67644533</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">463</td>
      <td class="rTableCell">463</td>
      <td class="rTableCell">0.6</td>
      <td class="rTableCell">32</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">Not used</td>
      <td class="rTableCell">Yes</td>
      <td class="rTableCell">-1.4360</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCell">0</td>
      <td class="rTableCellError">34.6723 &#8214; [ > 35 ]</td>
    </tr>
  </tbody>
</table>

最佳答案

如果您不希望浏览器“打断”单词，您可以使用 white-space: nowrap; css 属性。只需将它添加到您的 css 中即可:

.rTableCell, .rTableCellError, .rTableHead {
    display: table-cell;
    padding: 3px 10px;
    border: 1px solid #999999;
    white-space: nowrap;
}

这是一个工作示例:

    .rTable {
       display: table;
       width: 100%;
       border-collapse: collapse;
       border-spacing:0;
     }


    .rTableCell, .rTableCellError, .rTableHead {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
        white-space: nowrap;
    }
<table class="rTable" style="width:100%">
    <thead class="rTableHeading">
      <tr class="rTableRow">
  <th class="rTableHead"> # Time </th>
  <th class="rTableHead"> Exec Status </th>
  <th class="rTableHead"> Fail Reason </th>
  <th class="rTableHead"> Temp Sensor </th>
  <th class="rTableHead"> SvDrop Version </th>
  <th class="rTableHead"> Band </th>
  <th class="rTableHead"> Measured current </th>
  <th class="rTableHead"> #i </th>
  <th class="rTableHead"> Temperature </th>
  <th class="rTableHead"> Power Supply 1.8 Voltage I </th>
  <th class="rTableHead"> Power Supply 1.8 Voltage II </th>
  <th class="rTableHead"> Power Supply 3.3 Voltage I </th>
  <th class="rTableHead"> Power Supply 3.3 Voltage II </th>
  <th class="rTableHead"> Power Supply 1.24 Voltage </th>
  <th class="rTableHead"> Power Supply 1 Voltage </th>
  <th class="rTableHead"> Chain </th>
  <th class="rTableHead"> Additional Chain </th>
  <th class="rTableHead"> BB Filter </th>
  <th class="rTableHead"> Current Mode </th>
  <th class="rTableHead"> PA IntrExtrSelect </th>
  <th class="rTableHead"> MixerFreqTune </th>
  <th class="rTableHead"> PA DRV Gain </th>
  <th class="rTableHead"> PA Core </th>
  <th class="rTableHead"> Mixer Gain </th>
  <th class="rTableHead"> Frequency [MHz] </th>
  <th class="rTableHead"> AbortTimeout </th>
  <th class="rTableHead"> Signal Tx Type </th>
  <th class="rTableHead"> POUT-Limit-0 </th>
  <th class="rTableHead"> POUT-Limit-1 </th>
  <th class="rTableHead"> POUT-Limit-2 </th>
  <th class="rTableHead"> POUT-Limit-3 </th>
  <th class="rTableHead"> calibration summary </th>
  <th class="rTableHead"> CablesLoss </th>
  <th class="rTableHead"> BB CableLoss </th>
  <th class="rTableHead"> ProjectLoss </th>
  <th class="rTableHead"> BB ProjectLoss </th>
  <th class="rTableHead"> XTAL_X1 </th>
  <th class="rTableHead"> XTAL_X2 </th>
  <th class="rTableHead"> Band Gap </th>
  <th class="rTableHead"> RTRIM </th>
  <th class="rTableHead"> LO_iDC </th>
  <th class="rTableHead"> LO_qDC </th>
  <th class="rTableHead"> IQ_IQAMP </th>
  <th class="rTableHead"> IQ_IQPHASE </th>
  <th class="rTableHead"> Calibration Captune </th>
  <th class="rTableHead"> TimeSkew </th>
  <th class="rTableHead"> PLL Lock </th>
  <th class="rTableHead"> POUT [dBm] </th>
  <th class="rTableHead"> LO-Leakage [dBc] </th>
  <th class="rTableHead"> LO-Leakage [dBm] </th>
  <th class="rTableHead"> IQ-Imbalance [dBc] </th>
  <th class="rTableHead"> IQ-Imbalance [dBm] </th>
  <th class="rTableHead"> DVM Current [mA] </th>
  <th class="rTableHead"> Tx Gain </th>
      </tr>
    </thead>
    <tbody class="rTableBody">
  <tr class="rTableRow ">
  <td class="rTableCell"> 12:19:22 </td>
  <td class="rTableCell"> OK </td>
  <td class="rTableCell">  </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> Low </td>
  <td class="rTableCell"> 1.2956 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> Ch1 </td>
  <td class="rTableCell"> NONE </td>
  <td class="rTableCell"> WBPAPD </td>
  <td class="rTableCell"> Hi </td>
  <td class="rTableCell"> Internal </td>
  <td class="rTableCell"> 9 </td>
  <td class="rTableCell"> Full_Core </td>
  <td class="rTableCell"> Full_Core </td>
  <td class="rTableCell"> _0dB </td>
  <td class="rTableCell"> _2412_Ch1_g </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> Dac </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> {WiFiCableLoss : (CablesLoss : -7.013)}{DBoardLoss : (ProjectLoss : -0.835137789)}{CrystalCalibration : (XTAL_X1 : 463)(XTAL_X2 : 463) defult}{BandGapBuff : (Band Gap : 0.6) defult}{Rtrim : (RTRIM : 32) defult}{TxLoCalibration : (LO_iDC : 0)(LO_qDC : 0) defult}{TxIQMismatch : (IQ_IQAMP : 0)(IQ_IQPHASE : 0) defult}{TxMixerCap : (MixerFreqTune : 9)} </td>
  <td class="rTableCell"> -7.013 </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> -0.835137789 </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> 463 </td>
  <td class="rTableCell"> 463 </td>
  <td class="rTableCell"> 0.6 </td>
  <td class="rTableCell"> 32 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> Yes </td>
  <td class="rTableCell"> -4.4350 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCellError"> 31.6733 &#8214; [ > 35 ]  </td>
 </tr>
  <tr class="rTableRow ">
  <td class="rTableCell"> 12:19:23 </td>
  <td class="rTableCell"> OK </td>
  <td class="rTableCell">  </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> Hi </td>
  <td class="rTableCell"> 1.3091 </td>
  <td class="rTableCell"> 1 </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> null </td>
  <td class="rTableCell"> Ch1 </td>
  <td class="rTableCell"> NONE </td>
  <td class="rTableCell"> WBPAPD </td>
  <td class="rTableCell"> Hi </td>
  <td class="rTableCell"> Internal </td>
  <td class="rTableCell"> 8 </td>
  <td class="rTableCell"> Full_Core </td>
  <td class="rTableCell"> Full_Core </td>
  <td class="rTableCell"> _0dB </td>
  <td class="rTableCell"> _5500_Ch100_a </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> Dac </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> {WiFiCableLoss : (CablesLoss : -10.578)}{DBoardLoss : (ProjectLoss : -0.67644533)}{CrystalCalibration : (XTAL_X1 : 463)(XTAL_X2 : 463) defult}{BandGapBuff : (Band Gap : 0.6) defult}{Rtrim : (RTRIM : 32) defult}{TxLoCalibration : (LO_iDC : 0)(LO_qDC : 0) defult}{TxIQMismatch : (IQ_IQAMP : 0)(IQ_IQPHASE : 0) defult}{TxMixerCap : (MixerFreqTune : 8) defult} </td>
  <td class="rTableCell"> -10.578 </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> -0.67644533 </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> 463 </td>
  <td class="rTableCell"> 463 </td>
  <td class="rTableCell"> 0.6 </td>
  <td class="rTableCell"> 32 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> Not used </td>
  <td class="rTableCell"> Yes </td>
  <td class="rTableCell"> -1.4360 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCell"> 0 </td>
  <td class="rTableCellError"> 34.6723 &#8214; [ > 35 ]  </td>
 </tr>
    </tbody>
  </table>

关于html - 使表格单元格适合包含许多列的表格中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38292935/

上一篇：html - <span> 中的文本未从类继承样式

下一篇：javascript - 是否可以创建一个控制多个下拉菜单的 javascript？

相关文章：

javascript - 带有 Facebox 的 Onclick 在 IE8 中不起作用

html - 响应式背景 CSS 位置

jquery - 嵌套的 div 和移动列

javascript - 将自定义按钮应用于 Slick JS slider 的问题

html - 在背景色之上添加半透明灰色层

html - 混合搭配表格元素和表格样式元素

html - 无法覆盖文本对齐左 css

jquery - 阻止图像适合移动设备的屏幕

html - 与底部对齐的中心 div 组

html - 来自 Div 的表格 - IE 问题

©2024 IT工具网  联系我们