Question

我不知道如何使用CSS。所以我在这里问。我正在创建一个JSP页面。我使用Twitter Bootstrap在我的JSP页面中添加了两个表。我需要为两个表添加不同的对齐方式。因为我正在使用bootsrap两个表具有相同的对齐。

这是我的代码

<div>
<table class="table table-bordered source">
//table 1 contents
</table>
</div>

<div>
<table class="table table-hover target">
//table 2 contents
</table>
</div>

我想将文本对齐到表1的中心，然后左对齐表2.表2标题应该是中心，表2的钻孔应该是蓝色。

所以我尝试了这个CSS

    .table.table-hover.target td {
        text-align: left !important;
    }

    .table.table-hover.target th {
        text-align: right !important;
    }

    .table.table-bordered.source td
    {
        text-align: center !important;
    }
    .table.target
    {
            border-color:blue;
    }

它不起作用。当我给出

.table td
{
    text-align:left !important;
}

它将两个表内容对齐到左边。我现在不用CSS。我该如何编写CSS规则？

Answer 1

你可能有这样的事情：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Your page</title>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>

    ...

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>

在bootstrap-responsive.css正下方（或者如果您没有使用自适应布局，则您甚至不会使用此文件，那么将会低于bootstrap.css来电。）

添加一个新文件，如：

<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />

并将所有覆盖规则添加到该文件中，上面的代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Your page</title>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
</head>
<body>

    ...

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>

行[{1}}会说您的代码将位于该特定路径中，根据您的需要进行更改

<强>注释：

请记住评论你的CSS规则，以便其他人（甚至你在6个月的时间里）会理解为什么你写了...在CSS中你可以用"/assets/css/application.css"

添加评论。

例如：

/* ... */

使用Twitter Bootstrap添加CSS规则

1 个答案: