代码之家 › 专栏 › 技术社区 › Sam Denty zneak

CSS样式td元素取决于td宽度

html-table responsive-design css html javascript

1

Sam Denty zneak · 技术社区 · 9 年前

我有两个固定宽度的元素在一个 td

我该怎么做

例子:

table {
  border: 1px solid #000;
}
table td:nth-child(1) div {
  background: red;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 10px;
}
table td:nth-child(2) div {
  background: #777;
  display: inline-block;
  height: 20px;
  width: 200px;
}
.two {
width: 100px;
}

Table 1:
<table>
  <tr>
    <td><div></div><div></div></td>
    <td><div></div></td>
  </tr>
</table>
<br>
Table 2:
<table class="two">
  <tr>
    <td><div></div><div></div></td>
    <td><div></div></td>
  </tr>
</table>

1 回复 | 直到 6 年前

1

cjl750 9 年前

你能做的就是弄清楚 什么时候 它们包装,然后使用媒体查询。

通过设置 max-width body 标签,我发现他们不包装,直到334px宽。

所以你的风格应该是这样的:

@media all and (max-width: 334px) {
  td.WiFi div:nth-child(2) {
    border: 2px solid red; /* or whatever */
  }
}

现在,如果表本身和/或其某些列具有固定值,则可以在一切都不适合的情况下进行数学计算,并将其用作媒体查询。但我在你的网站上看不到用当前样式做这件事的方法,因为只有SVG是固定宽度的,其他的都是百分比。因此,整个过程非常灵活,在绝对必要之前,它不会包装。不过,不用担心,这通常是一件好事。

唯一可能出现问题的边缘场景是字体加载不正确,因此用户看到页面时使用了一些备用字体,因为现在你的列换行点基本上取决于其他列中文本的宽度。如果使用了不同的字体,您可能会得到不同的断点,这可能会也可能不会导致几个像素的布局中断。

不过,这可能不是您实际关心的问题,因为没有人会在桌面上查看334px宽的站点(即具有可调整大小窗口的设备),而手机基本上是360px+或320px宽。30年代和30年代的潜在问题领域实际上并不存在。