时间戳

首页 > 解决方案 > 修改样式属性的 CSS 代码

css - 修改样式属性的 CSS 代码

问题描述

我需要创建将修改样式的 CSS：

<th class="sort-column" data-is-only-head="false" data-field="daysElapsedfromInfoReceived" style="text-align: left;"><!-- react-text: 463 --> <!-- /react-text --><!-- react-text: 464 -->Days Elapsed From Info. Received<!-- /react-text --><!-- react-text: 465 -->  <!-- /react-text --><span class="order"><span class="dropdown"><span class="caret" style="margin: 10px 0px 10px 5px; color: rgb(204, 204, 204);"></span></span><span class="dropup"><span class="caret" style="margin: 10px 0px; color: rgb(204, 204, 204);"></span></span></span><div></div></th>

（从铬得到这个）

所以样式=“文本对齐：左；空白：正常”

我试过了：

th .sort-column {
    text-align: left;
    white-space: normal !important;
}

并且：

th.sort-column {
    text-align: left;
    white-space: normal !important;
}

没有运气。我需要这个 th 的内容在多行中。

根据 Chrome，接下来是 CSS 层次结构：

在此处输入图像描述

标签： cssbootstrap-4

解决方案

我已经稍微格式化了您的表格并将其涂成灰色以显示单元格大小：

th.sort-column {
  text-align: left;
  background-color: grey;
  min-width: 10rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <th class="sort-column">Days Elapsed From</th>
  <th class="sort-column">Info</th>
  <th class="sort-column">Received</th>
</table>

我需要这个 th 的内容在多行中。

更改为时会强制浏览器引入换行符min-width：width

th.sort-column {
  text-align: left;
  background-color: grey;
  width: 6rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<table>
  <th class="sort-column">Days Elapsed From</th>
  <th class="sort-column">Info</th>
  <th class="sort-column">Received</th>
</table>

推荐阅读