11

私は持っています

<table class="table table-condensed">

以前table-borderedはそこにありましたが、行の間に線が引かれています。テーブル全体の外側に上、下、左、右の行を配置し、行の間に行を配置しないようにします。

また、私は最初に赤ちゃんのステップを実行しようとしたので、ここで提案されているように行の間の行を削除しようとし ましたTwitterブートストラップ と与えられた解決策で行の行を削除します

table td {
    border-top: none;
}

私のために働いていませんでした

4

4 に答える 4

12

あなたのCSSは十分に具体的ではないので、取り上げられていないと思います。twitterブートストラップコードで境界線を定義するcssは次のとおりです。

.table th, .table td { /*css*/ }

しかし、あなたのコードは

table td { /* css */}

1つ目は、セレクターとしてテーブル要素の代わりにクラス「.table」を使用し、優先度が高いため、より具体的であると見なされます。

あなたがやりたいことをするために小さなjsfiddleを作りましたhttp://jsfiddle.net/hajpoj/EfUAa/11/

.table td, .table th {
    border: none;
}

table.table.table-condensed {
    border: 1px solid black;
}

cssの特異性に関する優れたリソースは次のとおりです。

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

また、ブートストラップファイルの後にcssファイルがロードされていることを確認してください。

于 2012-09-13T23:23:14.950 に答える
2

CSSスタイルに以下を追加できます。

<style>
.table{
outline-style: solid;
outline-width: 2px;
</style>

それが役に立てば幸い。「アウトラインスタイル」の詳細：https ：//www.w3schools.com/cssref/pr_outline-style.asp 。

于 2018-10-26T19:16:14.083 に答える
0

ブートストラップクラス「border」をテーブルタグに追加し、クラス「border-0」をth、tdタグに追加します

于 2021-02-18T15:42:00.893 に答える
0

最近これを見た人は、borderテーブルにクラスを追加するだけで、外側の境界線が表示されます。

外側の境界線のあるテーブル

<table class="table">
    <thead class="table border">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
    <tbody>
</table>

境界のないテーブル

table-borderless外側または内側の境界線のないテーブルを作成します

<table class="table">
    <thead class="table table-borderless">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
    <tbody>
</table>

外側の境界線があり、内側の境界線がないテーブル

外側の境界線のみを含み、内側の境界線を持たないテーブルを作成するには、テーブルにtable-borderlessとborderクラスの両方を追加するだけです。

<table class="table">
    <thead class="table border table-borderless">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
    <tbody>
</table>

これがCSSなどを使用せずに誰もが役立つことを願っています。

于 2021-11-22T10:09:45.770 に答える