table内に余白をつけて並べたい

下記のようなテーブルでtrの上下にpadding（32px）をつけかつ下線をひく。BBBBBBのtdにmargin-left(8px)をつけたいです。
要はテーブルの行の高さを内容より高くし、AとBのtd間に余白をつけたいというものです。

どのように指定すれば良いのかわからず困っています。

border-collapse: collapse;としないと下線が消えてしまいますし、separateにしないとborder-spacingが適応されません。

どのようにすればうまくいくのでしょうか？
よろしくお願いします。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
＊追記
下のdivで組んでみたのですがここからどうしたらいいのかわからず困っています。
divで組んでもmarginが表示されません。

やりたいこととしては
１、AとBの間に余白をつける。
２、Bの文字数が増えた時に改行はAより左に表示されAの上下はBの高さの中心に来るようにしたいです。

    <table>
      <tr>
        <td>AAAAAA</td>
        <td>BBBBBB</td>
      </tr>
      <tr>
        <td>AAAAAA</td>
        <td>BBBBBB</td>
      </tr>
      <tr>
        <td>AAAAAA</td>
        <td>BBBBBB</td>
      </tr>
      <tr>
        <td>AAAAAA</td>
        <td>BBBBBB</td>
      </tr>
      <tr>
        <td>AAAAAA</td>
        <td>BBBBBB</td>
      </tr>
    </table>



table{
  border-collapse: collapse;
  border-spacing: 8px;
}

tr {
  background-image: repeating-linear-gradient(90deg, #000, #000 10px, transparent 0, transparent 15px);
  background-size: 15px 2px;
  background-position: bottom left;
  background-repeat: repeat-x;
}

td {
  padding: 32px 0px;
}


        <div class="table">

          <div class="column">
            <div class="A">
              AAAAAA
            </div>
            <div class="B">
              BBBBBB
            </div>
          </div>

          <div class="column">
            <div class="A">
              AAAAAA
            </div>
            <div class="B">
              BBBBBB
            </div>
          </div>

          <div class="column">
            <div class="A">
              AAAAAA
            </div>
            <div class="B">
              BBBBBB
            </div>
          </div>

          <div class="column">
            <div class="A">
              AAAAAA
            </div>
            <div class="B">
              BBBBBB
            </div>
          </div>

          </div>



.column{
  border-bottom: dashed 2px #000000;
  padding: 32px 0;
}

.A{
  float: left;
}

.B{
  margin-left: 8px;
}

yoshinavi

2019/01/12 07:13

現状ではtdの左右両方にmarginは付けれますが、片方のみにmarginは付けれません。（前回の質問に回答した方法です。） tableではなく、div等をflex等で見た目上表みたいにする方法、ではダメなのでしょうか？

sena14

2019/01/12 08:37

特にtableにこだわりはありません。 divで上記のような表を作っていて参考にできそうなサイトなどありますでしょうか？

yoshinavi

2019/01/12 08:45

であれば、「div 並べる」等検索すると、横並びの方法はいくつかあり、それぞれの特徴を理解したのちに、適用させれば良いかと思います。

sena14

2019/01/12 11:36

divで組んでみたのですがやはり細かいところで詰まってしまいます。どのようにしたらいいでしょうか？よろしくお願いします。

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

回答2件

ベストアンサー

div組みについての回答です。

提示コードの場合は、「.B」にもfloatを設定すると「margin-left」が効きます。

CSS
1.A {
2  float: left;
3}
4
5.B {
6  float: left;　/* ← 追加 */
7  margin-left: 8px;
8}

-追記-

条件を良く見ていなかったです。条件に合わせるには「flex」が簡単かと思います。
※「.A」は不要ですが、他の装飾等があれば記述してください。

CSS
1.column {
2  border-bottom: dashed 2px #000000;
3  padding: 32px 0;
4  display: flex;        /* ← 追加 */
5  align-items: center;  /* ← 追加 */
6}
7
8.B {
9  margin-left: 8px;  
10}
11

改行はAより左に表示され･･･

「右」の間違いと理解しましたが違っていたらコメントしてください。

投稿2019/01/13 09:36

編集2019/01/13 09:56

yoshinavi

総合スコア3523

HTML
1<table>
2  <tr>
3    <td>AAAAAA</td>
4    <td>BBBBBB BBBBBB BBBBBB BBBBBB</td>
5  </tr>
6  <tr>
7    <td>AAAAAA</td>
8    <td>BBBBBB</td>
9  </tr>
10  <tr>
11    <td>AAAAAA</td>
12    <td>BBBBBB</td>
13  </tr>
14  <tr>
15    <td>AAAAAA</td>
16    <td>BBBBBB</td>
17  </tr>
18  <tr>
19    <td>AAAAAA</td>
20    <td>BBBBBB</td>
21  </tr>
22</table>

CSS
1table {
2  border-collapse: collapse;
3  border-spacing: 8px;
4}
5
6tr {
7  background-image: repeating-linear-gradient(90deg, #000, #000 10px, transparent 0, transparent 15px);
8  background-size: 15px 2px;
9  background-position: bottom left;
10  background-repeat: repeat-x;
11}
12
13td {
14  padding: 32px 0px;
15}
16
17/* 以下 追加コード */
18td:first-child::after {
19  content: "";
20  margin-right: 8px;
21}