表を横並びに出来ない(html,CSS)

実現したいこと

添付のような表をライトニングのホームページの表に作りたい。
(１列×３行の表が横並び)

発生している問題・分からないこと

①CSSに記入した、表の横の長さがHTMLに反映されず、横がずっと広がっている
②表同士が横並びにならない
③CSSのclassが赤字になっている

該当のソースコード

html

1そして以下HTMLとCSSを作成しました。 2 3<div class="allblock">4 <div class="rightblock">5 <table class="doo">6 <tr>7 <td id="pro1">あああ</td>8 </tr>9 <tr>10 <td class="gro2">いいいいいいいいいいいいいいいいいいい</td>11 </tr>12 <tr>13 <td class="pro3">14 <a href="https:ほにゃらら/">詳細はこちら 15 <a/>16 </td>17 </tr>18 </table>19 </div>20 <div class="rightblock">21 <table =class"goo"> 22 <tr>23 <th id="pro4">うう 24 <th>25 <tr>26 <tr>27 <td id="pro5">28 <figure class="groly">29 <a href="http://www.com/">30 <img alt="" src="http://ほにゃらら.jpg">31 </a>32 </figure>ううう 33 </td>34 </th>35 <tr>36 <td id="pro6">37 <a href="https://">詳細はこちら 38 <a/>39 </td>40 </th>41 </table>42 </div>43</div>

css

1.allblock{display:flex;}2 3leftblock{border:1px solid #e2e2e2}4 5.doo{6text-align:left;7width:390px;8height:30px;9font-size:13px; 10 11#pro1{12color: white;13text-align:left;14width:390px;15height:50px;16font-size:13px;17background-color:#f3414d; 18 19.pro2{20height:50px;21width:390px;22padding: 32px 16px;23}24 25.pro3{26height:50px;27padding: 32px 16px;28}29 30 31 32#pro4{color: white;33text-align:left;34 width:590px;35height:50px;36font-size:13px;37background-color:#f3414d; 38 39 40 41#pro5{42 padding:32px 16px;43display: flex;44width:590px45}46 47 48#pro6{49 text-align: center;50 padding: 14px;51 border-top: 1px dotted #e2e2e2;52width:590px;53}

試したこと・調べたこと

上記の詳細・結果

コード上は表が出来ているつもりでしたが、デベロッパーツールで確認したら表の横の長さがズレていました。(表見出し以外が横に伸び切っている)

個別のCSSコードは間違っていないものの、該当CSSをまとめて入力すると下記文法エラーが出てしまいます。(確認ツールはhttps://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_input）

#pro1{ color: white; text-align:left; width:390px; height:50px; font-size:13px; background-color:#f3414d; .pro2{ height:50px; width:390px; padding: 32px 16px; } .pro3{ height:50px; padding: 32px 16px; } #pro4{color: white; text-align:left; width:590px; height:50px; font-size:13px; background-color:#f3414d; #pro5{ padding:32px 16px; display: flex; width:590px } #pro6{ text-align: center; padding: 14px; border-top: 1px dotted #e2e2e2; width:590px; }

補足

特になし