html - 如何在表格中设置列宽以便内容根据宽度调整？

Question

这是桌子

<div class="container">
  <table class="table table-striped" id="sms_data">
    <thead>
      <tr>
        <th class="message">Message</th>
        <th>DELIVERED</th>
        <th>UNDELIVERED</th>
        <th>EXPIRED</th>
        <th>REJECTED</th>
        <th>TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <!-- 160 character long message-->
        </td>
        <td> Number</td>
        <td> Number</td>
        <td> Number</td>
        <td> Number</td>
        <td> Number Total</td>
      </tr>
    </tbody>
  </table>
</div>

我希望消息列的宽度约为 20%。所以我尝试了这个

th.message {
    width: 20%;
}

但是这样，内容就会重叠在其他列上......我希望 Message 列中的内容看起来像这样

    Message with 160 
character around

而不是这个

    Message of 160 characters long

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap 用于设置所有内容的样式。请帮助我如何做到这一点？任何帮助表示赞赏..

Answer 1

<style>
    .table{
        table-layout:fixed;
    }
    td.message{
        overflow: hidden;
    } 
    td, th{
        white-space: initial !important;
    }
</style>

这解决了我的问题