javascript - 使其表格单元格不会因为内容而垂直扩展
问题描述
我有一个 html 表,我用从数据库中获取的内容填充这个表,但是我想避免一个副作用,我想避免单元格垂直扩展以容纳内容,我尝试使用table-layout:fixed
,overflow:hidden
或设置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>
解决方案
您可以用 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>
推荐阅读
- jmeter - 在mac上运行jmeter的问题
- sql - 在同一列的行之间应用条件
- azure-ad-b2c - 用户旅程正文中的 Azure B2C Rest API 为空
- php - PHP,数组-混合顺序,steam api返回不同顺序
- sas - SAS:如何测试一个值在时间之间的稳定性
- javascript - SameSite=Lax 是否应该允许 3rd-party GET?
- python - 如何将外部库导入 Ansible 模块?
- asp.net - .NET ApiController:使用 [FromBody] T 的自定义模型绑定行为
- python - 无法使用 scrapy 提取完整的 url @href
- c# - EF Core - 映射相同类型的属性集合