[解決済み] Twitter Bootstrap でテーブルのテキストを中央揃えにする
2022-07-19 12:32:37
質問
なぜか、テーブルの中のテキストが中央に配置されません。どうすればテーブル内のテキストを中央揃えにできますか?
例えば、私は "Lorem" を4つの "1" の真ん中に置きたいと思っています。
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
text-align: center;
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>3</th>
<th>3</th>
<th>3</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Lorem</td>
<td colspan="4">ipsum</td>
<td colspan="4">dolor</td>
</tr>
</tbody>
</table>
どのように解決するのですか?
この
.table td
のtext-alignはcenterではなくleftに設定されています。
これを追加すると、すべての
td
s:
.table td {
text-align: center;
}
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
table,
thead,
tr,
tbody,
th,
td {
text-align: center;
}
.table td {
text-align: center;
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>3</th>
<th>3</th>
<th>3</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Lorem</td>
<td colspan="4">ipsum</td>
<td colspan="4">dolor</td>
</tr>
</tbody>
</table>
関連
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrap Form File Element Upload Button(ファイルアップロードボタン
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] Twitter Bootstrap - 行と行の間に上部のスペースを追加する
-
[解決済み] ブートストラップテーブルの垂直方向への整列
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 4のColでコンテンツを下に揃える方法
-
[解決済み] bootstrapでpanel-bodyの背景色を変更するには?
-
[解決済み】Twitter Bootstrap - 要素を水平または垂直に中心化する方法
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み】リストセレクトボックス(ドロップダウン)をbootstrapでレンダリングする方法は?
-
[解決済み】Twitter Bootstrapのポップオーバーを外側のクリックで解除する方法は?
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
-
[解決済み] Bootstrap 4: ドロップダウンメニューが画面の右側にずれていく
-
[解決済み] bowerでbootstrapを使用する
-
[解決済み] Bootstrapがline-heightプロパティを1.428571429に設定する理由は何ですか?