Question

尝试构建一个表格，每个表格名称旁边都带有排序图标。（使用引导程序和超棒的字体）

请参考下面的代码

HTML

<table class="table table-responsive">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Name and Surname</th>
  </tr>
</table>

CSS

th::after {
  font-family: FontAwesome;
  content: "\f0dc";
  float: right;
  text-align: right;
}

为什么float和text-align在这里不起作用？请让我知道正确的CSS代码以使其正确。我也不希望该sort图标像普通文本一样在较小的屏幕中包裹起来。应该在正确的位置。

Answer 1

我认为您混淆了表标签

<table></table> table tag 
<thead></thead> table header
<th></th>       table column 
<tbody></tbody> table body
<tr></tr>       table row 
<td></td>       table cell
<tfoot></tfoot> table footer

但是要用当前数据的结构化方式回答您的问题，只需添加一个空表单元格或列（视情况而定）到您的表行中，然后使用下面的css将所需的内容添加到该单元格即可。

<!DOCTYPE html>
<html>
<head>
    <title>extra table cell</title>
    <style type="text/css">
        tr th:last-child::after {
            font-family: FontAwesome;
            content: " i am what you want";
        }
    </style>
</head>
<body>
    <table class="table table-responsive">
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Name and Surname</th>
        <th></th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Name and Surname</th>
        <th></th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Name and Surname</th>
        <th></th>
      </tr>
    </table>
</body>
</html>

::在向右浮动后不起作用

1 个答案: