使其表格单元格不会因为内容而垂直扩展答案

【问题标题】：Make it so table cell don't expand vertically because of content使其表格单元格不会因为内容而垂直扩展
【发布时间】：2018-11-14 12:34:54
【问题描述】：

我有一个 html 表格，我用从数据库中获取的内容填充这个表格，但是我想避免一个副作用，我想避免单元格垂直扩展以容纳内容，我尝试使用 table-layout:fixed，@ 987654322@ 或为行设置 max height 但这些都不起作用。

知道如何解决这个问题吗？

这是我的表格组件（使用 vue）：

<table class="entry_table_container" v-if="posts" style="overflow:hidden; table-layout:fixed;">
  <tr>
    <th class="entry_table_header" width="5%">Categoría</th>
    <th class="entry_table_header" width="5%">Titulo</th>
    <th class="entry_table_header" width="5%">Contenido</th>
    <th class="entry_table_header" width="5%">Imagen</th>
    <th class="entry_table_header" width="5%">Descripción</th>
    <th class="entry_table_header" width="5%">Visible</th>
    <th class="entry_table_header" width="5%">Acción</th>
  </tr>
  <tr class="row" v-for="post in posts" :key="post.id">
    <td>{{ post.postcategory.name }}</td>
    <td>{{ post.title }}</td>
    <td v-html="post.body"></td>
    <td>
      <div class="image_row_container" :style="'background-image:url('+post.image+');'"></div>
    </td>
    <td v-html="post.imageDescription"></td>
    <td class="checkbox_row" style=""><input type="checkbox" class="entry_checkbox" :checked="post.isVisible"></td>
    <td class="row_buttons_container">
      <button class="row_buttons_button boot_blue" @click="showModal({ activePostModal: 'PostUpdateModal', post: post})" type="button" title="Editar"><i class="fas fa-pencil-alt"></i></button>
      <button class="row_buttons_button boot_red" @click="showModal({ activePostModal: 'PostDeleteModal', post: post})" type="button" title="Eliminar"><i class="fas fa-trash-alt"></i></button>
    </td>
  </tr>
</table>

【问题讨论】：

height 或 max-height 对 table 元素不起作用，请尝试在 td 元素上设置 height 或 max-height
你试过no-wrap吗？

标签： javascript html css vue.js

【解决方案1】：

你可以用 div 包裹你的 td 内容，然后设置它的高度

.heightCont{
  height: 1em;
  overflow: hidden;
}

<table class="entry_table_container" v-if="posts" style="overflow:hidden; table-layout:fixed;">
  <tr>
    <th class="entry_table_header" width="5%">Categoría</th>
    <th class="entry_table_header" width="5%">Titulo</th>
    <th class="entry_table_header" width="5%">Contenido</th>
    <th class="entry_table_header" width="5%">Imagen</th>
    <th class="entry_table_header" width="5%">Descripción</th>
    <th class="entry_table_header" width="5%">Visible</th>
    <th class="entry_table_header" width="5%">Acción</th>
  </tr>
  <tr class="row" v-for="post in posts" :key="post.id">
    <td><div class="heightCont">{{ post.postcategory.name }}</div></td>
    <td><div class="heightCont">{{ post.title }}</div></td>
    <td v-html="post.body"></td>
    <td>
      <div class="image_row_container" :style="'background-image:url('+post.image+');'"></div>
    </td>
    <td v-html="post.imageDescription"></td>
    <td class="checkbox_row" style=""><input type="checkbox" class="entry_checkbox" :checked="post.isVisible"></td>
    <td class="row_buttons_container">
      <button class="row_buttons_button boot_blue" @click="showModal({ activePostModal: 'PostUpdateModal', post: post})" type="button" title="Editar"><i class="fas fa-pencil-alt"></i></button>
      <button class="row_buttons_button boot_red" @click="showModal({ activePostModal: 'PostDeleteModal', post: post})" type="button" title="Eliminar"><i class="fas fa-trash-alt"></i></button>
    </td>
  </tr>
</table>

【讨论】：