1

我不知道如何使用 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 规则？

4

1 回答 1

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>

该行"/assets/css/application.css"会说您的代码将在该特定路径中，根据您的需要进行更改

注释：

请记住评论您的 CSS 规则，以便其他人（甚至您在 6 个月的时间内）会理解您为什么要写这个......在 CSS 中您可以添加评论将其包装/* ... */

例如：

/* TABLES OVERRIDE: so they look like the main theme */
.table td
{
    text-align:left !important;
}
于 2013-04-22T06:09:08.337 回答