css - Twitter Bootstrap を使用して CSS ルールを追加する

Question

CSSの使い方がわかりません。だから私はここで尋ねています。JSPページを作成しています。Twitter Bootstrap を使用して JSP ページに 2 つのテーブルを追加しました。両方のテーブルに異なる配置を追加する必要があります。ブートストラップを使用しているため、両方のテーブルが同じ配置になっています。

これは私のコードです

<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 のテキストを左に揃えたいと考えています。

だから私はこの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 ルールはどのように記述すればよいですか?