tableのtd要素にpaddingを簡潔にかける方法について

こんにちは。
以下のテーブルの各td要素に対してpaddingを与えたいと考えています。
この時、皆さんであればどのように簡潔に書かれますでしょうか？

tableに対してclass属性を振り、その子孫という風にstyeを当てればよいと思いますが、table tr tdではあたりませんでした。。

<table>
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
</table>

アイディアをお持ちの方いらっしゃいましたらよろしくお願い致します。

mai1210

2021/02/22 03:46

table tr td { padding: 10px; } 純粋にこれでpaddingが付くと思うのですが…別のスタイルと競合しているのではないでしょうか。 tdには最終的にどういうスタイルが当たっているのか、デベロッパツール等で確認できますか？

m.ts10806

2021/02/22 03:47

具体的にどうしたいのかやってみて具体的にどうなったのか記載してください

行動規範の内容に同意します

回答3件

皆さまありがとうございます。
やはりtable tr tdの方法であっていたようで、、
vuetifyの何らかのスタイルが当たっていたものと思い、今回はimportantを使うことにしました。

投稿2021/02/22 08:25

tktail

総合スコア72

ベストアンサー

tableに対してclass属性を振り、その子孫という風にstyeを当てればよいと思いますが

↑のコードでクラス付けが無いし、table tr td {} は効くはずなのですが、意図を組んで回答してみます。

サイト内全てでなく、指定したテーブルのみに余白を持たせたいのであれば、自分ならこんな風にします。

<html>
    <head>
        <style>
            .has-style-padding th,
            .has-style-padding td {
                padding: 1em 2em;
            }
        </style>
    </head>

    <body>
        <table class="has-style-padding" border="1">
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
        </table>
    </body>
</html>

投稿2021/02/22 07:58