在html中table表格中如何让td的高度变短 如图 求大神支招

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在html中table表格中如何让td的高度变短 如图 求大神支招相关的知识,希望对你有一定的参考价值。

参考技术A 在 css 样式里面设置行高就行
tr
line-heght:20px;

高度自己拿捏改变
参考技术B tr
line-height:10px;

参考技术C <td style="height:30px; line-height:30px;"></td>

如何使表格中的 <td> 元素高度相同?

【中文标题】如何使表格中的 <td> 元素高度相同?【英文标题】:How to make <td> elements in table same height? 【发布时间】:2016-04-30 00:04:43 【问题描述】:

我知道有很多关于此的问题,但与大多数人相比,我有不同的设置。我有一个与我的页面一起移动的单行表。见 JSFiddle:https://jsfiddle.net/evk49ey1/1/

html:

<table>
<tbody>
    <td>a</td>
    <td id="b">b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
    <td>i</td>
    <td id="j">j</td>
    <td>k</td>
</tbody>
</table>

css:

td
overflow: hidden;
display: inline-block;
white-space: nowrap;
  vertical-align: top;
background-color: #3399ff;
height: 50px;
width: 75px;
border: 1px solid black;
border-collapse: collapse;

td:nth-child(odd)
  background-color: #1177dd;


#b
  height: 80px;


#j
  height:90px;

我想要一个只有 css 和 html 的解决方案。提前致谢!

编辑:这是我现在所拥有的:https://jsfiddle.net/evk49ey1/3/

单元格具有相同的高度,当您更改一个单元格的内容时,其他单元格也会随之更改。

截图:

现在我希望单元格 g、h、i、j 和 k 的高度为 50px,因为它们不在需要更高高度的单元格 a 旁边。

这就是我想要实现的目标:

【问题讨论】:

您希望它们都具有相同的高度并且最大高度为 90px? 等高:使用 flexbox 简单易用:***.com/a/33815389/3597276 @Narek-T,不,这不是我想要的。请参阅我的问题中的编辑:部分,了解我想要实现的目标。 @Michael_B,我认为这不会解决我的问题。请参阅我的问题中的编辑:部分,了解我想要实现的目标。 【参考方案1】:

好的,我认为这是可能的,但不能用于表格。你需要使用弹性盒子。 这是我的例子。

.container 
  display: flex;
  flex-wrap: wrap;

.inner 
  overflow: auto;
  display: flex;
  word-wrap: break-word;
  background-color: #3399ff;
  width: 75px;
  min-height: 50px;
  border: 1px solid black;

.inner:nth-child(odd) 
  background-color: #1177dd;
<div class="container">
  <div class="inner">
    <p>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</p>
  </div>
  <div class="inner">b</div>
  <div class="inner">c</div>
  <div class="inner">d</div>
  <div class="inner">e</div>
  <div class="inner">f</div>
  <div class="inner">g</div>
  <div class="inner">h</div>
  <div class="inner">i</div>
  <div class="inner">j</div>

还有JSFiddle link。当你调整窗口大小时,你可以看到它。

【讨论】:

【参考方案2】:

有几个问题:

    缺少&lt;tr&gt; 标签,这是无效的HTML。

    删除td上的display: inline-block;,它会破坏默认的表格布局,并阻止单元格匹配高度。

    border-collapse: collapse; 必须设置为 table,而不是 td

    由于您在单元格上设置了不同的height,它会找到最高的单元格并将其应用于其余单元格。如果您没有定义任何height,将由内容决定。同样,它总是匹配最高的。

    如果您需要固定单元格宽度,并且单元格数量已知,假设每个单元格为 11,75px 宽度。在75x11=825pxtable 上设置宽度。

更新代码如下:

table 
  border-collapse: collapse; /*added*/
  width: 825px; /*added*/

td 
  /* overflow: hidden; */
  /* display: inline-block; */
  white-space: nowrap;
  vertical-align: top;
  background-color: #3399ff;
  height: 50px;
  width: 75px;
  border: 1px solid black;
  /* border-collapse: collapse; */


td:nth-child(odd) 
  background-color: #1177dd;


#b 
  height: 80px;


#j 
  height: 90px;
<table>
  <tbody>
    <tr>
      <td>a</td>
      <td id="b">b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
      <td>f</td>
      <td>g</td>
      <td>h</td>
      <td>i</td>
      <td id="j">j</td>
      <td>k</td>
    </tr>
  </tbody>
</table>

【讨论】:

【参考方案3】:

我不知道我是否真的理解你的问题,但如果你需要所有tds 的高度相同,我会将它们包装成tr,如下所示:

https://jsfiddle.net/evk49ey1/2/

给 tr 一个高度(自动使用最高的 td 高度作为行高),然后将 td 高度设为其父级的 100% (tr)

trheight:auto;
tdheight:100%

对于“b”和“J”,您设置了不同的高度,我不知道是否需要。这就是他们身高不同的原因

编辑

有点混乱.. css 是一种不允许动态更改的语言,因为当您部署项目时,所有样式以及页面需要显示的方式都已经存在并且可以使用。

如果您需要动态更改 css 值,您没有其他选择,只有 javascript。

【讨论】:

我希望行中的所有 div 都与最高的 div 高度相同 所以我的小提琴有效,只需删除#b 样式,它们的高度都相同 如果你也改变#j样式,你可以看到所有的tds都和你放入#j的高度一样 但如果我将 td 高度设置为 100px 并将 #j 高度设置为 200px,则所有其他 div 都不是 200px。 如果你想拥有所有相同的高度,你为什么要设置一个高度的两倍?如果你想要动态改变,你不能只用 html/css 来做,但你必须使用 javascript

以上是关于在html中table表格中如何让td的高度变短 如图 求大神支招的主要内容,如果未能解决你的问题,请参考以下文章

table中如何用CSS控制<tr>><td>的宽度和高度

hbuildertd的宽度

如何使表格中的 <td> 元素高度相同?

HTML的table中如何合并多行?

如何在 HTML 中以毫米为单位给出表格的宽度和高度

如何使用css让td中的文字自动换行