代码之家 › 专栏 › 技术社区 › Sod Almighty

当使用rowspan时,如何在所有浏览器中正确调整表行的大小?

cross-browser html-table css html

Sod Almighty · 技术社区 · 7 年前

不同的 后果我以为HTML应该是一个标准?

可以找到一些简化的代码 here .

这就是我想要实现的。一个三行表格,高度取决于其内容,中间有一行2px,其余两行平均共享剩余空间:

以下是我在Safari中得到的信息:

以下是我在Firefox中得到的信息:

display: table-cell 等等),它只会导致更多的问题,例如结果与页面上的其他元素不一致。

我的问题是:如何在所有浏览器中一致地实现预期结果?

我宁愿不使用Javascript来解决这个问题。

为了避免XY问题,下面是一些我想要的实际效果的截图(在Chrome中工作):

这就是Firefox中的问题:

2 回复 | 直到 7 年前

Seb 7 年前

我将使用div而不是表来解决这个问题。使用父元素和子元素的position属性以及子元素上的transform属性,使其位于带边框的父元素之前。这将是跨浏览器兼容的。试试这个:

HTML:

<div class="container">
  <h1 class="title"><span>Title</span></h1>
</div>

.container {
  position: relative;
  border: 1px solid #000;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.title span {
  display: inline-block;
  padding: 0.2em 0.7em; 
  line-height: 1.5em;
  background-color: #fff;
}

Julio Feferman Mohamed Mostafa Goda 7 年前

HTML是浏览器遵循的标准,而浏览器却不遵循。使用HTML控制表特别困难 col row spans . 我会尽量少用桌子 flex 布局,如以下简化示例所示。

body {
  background-color:white;
}

.outer {
  width:200px;
  border:1px solid grey;
  padding:16px;
  position:relative;
  margin-top:20px;
}

.title {
  margin:-24px auto 0px auto;
  width:60px;
  background-color:white;
  text-align:center;
}

.icon-container {
  display:flex;
  flex-wrap:wrap;
}

.icon {
  border:1px dashed grey;
  height:50px;
  margin:8px;
  flex-grow:1;
}

<div class="outer">
  <div class="title">TITLE</div>
  <div class="icon-container">
    <div class="icon">ICON 1</div>
    <div class="icon">ICON 2</div>
    <div class="icon">ICON 3</div>
    <div class="icon">ICON 4</div>
  </div>
</div>