[HTML] tableの中でtableがある状況で表と表の隙間を埋める方法が知りたい。

質問内容

提示コードですが画像Aの朝・午前１の下の現場名との隙間を埋める方法が知りたいです。

状況

index.htmlのコメント部内部でhtmlファイルWorkData.htmlを読みこんで表示しています。表の中で表を作成しています。

環境

OS：windows10
ブラウザ：google chrome

調べたこと

画像BですがどうやらworkDataクラスで隙間らしいのですが表を使いたいのでborderは削除してくありません。

知りたいこと

表の中に表の状況でborderを使った場合で隙間をなくす方法が知りたい。

画像A

画像B

index.html

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>test</title>
5       
6        <link rel="stylesheet" type="text/css" href="style.css">
7    </head>
8
9    <body>
10        <div>
11            <table class="main">
12                <tr>
13                    <th class="year">2023</th>
14                    
15                    <th>朝・午前 1</th>
16                    <th>朝・午前 2</th>
17                    <th>朝・午前 3</th>
18                    <th>朝・午前 4</th>
19
20                    <th>夜間・午後 1</th>
21                    <th>夜間・午後 2</th>
22                    <th>夜間・午後 3</th>
23                    <th>夜間・午後 4</th>
24                </tr>
25
26                <!-- ################################################## -->
27                <tr class="WorkData_js"></tr>
28                <!-- ################################################## -->                    
29
30            </table>
31
32
33            <dialog id="modalWindow">
34                <p>sample</p>
35                <button id="modal_Close">モードレスダイアログを閉じる</button>
36            </dialog>
37
38            
39        </div>
40        
41    </body>
42    <script src="script.js"></script>
43</html>

WorkData.html

html
1
2
3<!-- 日付データ-->
4<td class="dayData">
5    <div class="item">
6        <div><span>日付</span></div>
7        <div><span>曜日</span></div>
8        <div><span>0</span></div>
9    </div>
10</td>
11
12
13<!-- 作業データ-->
14<td class="workData">
15<table>
16    
17    <tr>
18        <td>現場名</td>
19        <td colspan="5">成田市公設地方卸売市場</td>
20    </tr>
21
22    <tr>
23        <td>物量</td>
24        <td colspan="5">各階CD枠16+LSD枠18搬入</td>
25    </tr>
26
27    <tr>
28        <td>メーカー</td>
29        <td>鈴木</td>
30
31        <td>担当者</td>
32        <td colspan="3">小松ｳｫｰﾙ千葉営</td>
33    </tr>
34
35    <tr>
36        <td>備考欄</td>
37        <td colspan="5">テスト備考</td>
38        
39    </tr>
40    
41    <tr>
42        <td>人数</td>
43        <td>5</td>
44
45        <td>作業員</td>
46        <td colspan="3">テスト、テスト</td>
47        
48    </tr>
49
50    
51    <tr>
52        <td>朝礼</td>
53        <td>9:00</td>
54
55        <td>新規</td>
56        <td>朝礼後</td>
57
58        <td>現担</td>
59        <td>須藤</td>
60    </tr>
61
62    
63    <tr>
64        <td>開始時間</td>
65        <td>返信済み</td>
66
67        <td>作業時間</td>
68        <td>8:00</td>
69
70        <td>職長</td>
71        <td>テスト</td>
72    </tr>
73
74</table>
75
76</td>
77

style.scss

scss
1
2body
3{
4    overflow-x: scroll;
5    overflow-y: scroll;
6}
7
8
9table
10{
11    border-collapse: collapse;
12}
13
14
15    
16.main > tbody > tr > th
17{
18    border: solid #888;
19    min-width: 800px;
20    box-sizing: border-box;
21    padding: 0;
22
23    
24    &.year
25    {
26        min-width: 200px;
27    }
28
29}
30
31
32/*#############################################
33# 作業データ
34###############################################*/
35.workData > table > tbody > tr > td
36{
37    //border: 3px solid #888;
38    border: 3px solid #888;
39}
40
41.workData > table
42{
43    
44    width: 100%;
45    height: 250px;
46}
47
48.data > td
49{
50    border: solid #888;
51
52    box-sizing: border-box;
53    padding: 0;
54    height: 100%;
55
56}
57
58.workData
59{
60    padding: 0;
61}
62
63.dayData
64{
65    padding: 0;
66}
67
68.dayData > .item
69{
70    display:flex;
71
72    div
73    {
74
75
76        display: flex;
77        border:  solid #888;         
78        width: 100%;
79        justify-content: center;
80        align-items: center;
81        height: 250px;
82
83    }
84}
85
86

退会済みユーザー

2023/04/03 03:11

環境を書きましょう。PC の OS、ブラウザは何か、そのバージョンは何かなど。

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

回答1件

テーブルの中にテーブルは論理的に意味がないのでやめるべきですが
どうしてもというのであればこんな感じ

CSS
1.workData > table > tbody > tr:first-child > td
2{
3  border-top:0;
4}
5.workData > table > tbody > tr > td:first-child
6{
7  border-left:0;
8}
9.workData > table > tbody > tr:last-child > td
10{
11  border-bottom:0;
12}
13.workData > table > tbody > tr > td:last-child
14{
15  border-right:0;
16}