对齐左侧CSS上的所有元素

Question

我有一张表

    <table class="table table-striped table-bordered table-hover ">
        <thead>
            <tr>
                <th>
                    Network Name
                </th>
                <th>
                    Abbreviated
                </th>
                <th>
                    Description
                </th>
                <th>
                    Has Channel
                </th>

                <th>
                    IsActive
                </th>
                <th>Action</th>
            </tr>
        </thead>
    </table>

我得到的输出就像这样

我希望他们每个人都离开。

怎么做？

Answer 1

在浏览器中，右键单击其中一个表格标题文本（即“网络名称”），然后单击“检查元素”。在新打开的开发人员工具中，单击“样式”窗口。

在“样式”选项卡中，您可以找到应用于所选元素的所有规则。其中一条规则将包含所述text-align: right;。这是您要覆盖的规则，即通过比上述规则更具体。

示例

在您提到的案例中，您对表格标题有一般规则。

table {
  width: 300px;
  border: 1px solid black;
}

table tr th {
  text-align: right;
}

<table>
  <tr>
    <th>Row header</th>
  </tr>
  <tr>
    <td>Row data</td>
  <tr>
</table>

 

使用ID或class可以更加具体，我将在我的示例中使用一个类：

table {
  width: 300px;
  border: 1px solid black;
}

/* existing rule just for illustration */
table tr th {
  text-align: right;
}

/* more specific than above rule */
table.left-header tr th {
  text-align: left;
}

<table class="left-header">
  <tr>
    <th>Row header</th>
  </tr>
  <tr>
    <td>Row data</td>
  <tr>
</table>

Answer 2

让我们假设您的代码正在运行并且您的引导程序css正在运行..那么它应该在一行左对齐但在您的情况下如果不是Bootstrap有一个类可以执行它：class="text-left"

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<table class="table table-striped table-bordered table-hover pull-left">
        <thead>
            <tr>
                <th class="text-left">
                    Network Name
                </th>
                <th class="text-left">
                    Abbreviated
                </th>
                <th class="text-right">
                    Description
                </th>
                <th class="text-left">
                    Has Channel
                </th>

                <th class="text-left">
                    IsActive
                </th>
                <th class="text-left">Action</th>
            </tr>
        </thead>
    </table>

我不希望将类添加到每个th，但它是一个解决方案，因为您并不真正提供代码来使用。

描述是正确的，只是为了让您了解发生了什么。只需使用bootstrap添加类。

Answer 3

text-align: left;

此属性用于对齐左侧文本。请检查并找到具有text-align: right;的课程并进行更改。

Answer 4

您可以向th元素添加一个类，然后设置该类的样式：

<th class="align-to-left">

.align-to-left{
      text-align:left;
    }