SCSS

by Dedi Wibisono

HTML

<table>
                <thead>
                    <tr>
                        <th colspan="2">Pesanan Anda</th>
                    </tr>
                </thead>
                <tbody>
                            <tr>
                                <td>Nama Tamu</td>
                                <td>Indra Basuki</td>
                            </tr>
                            <tr>
                                <td>Nama Pemesan</td>
                                <td>Harumi Tanoto</td>
                            </tr>
                            <tr>
                                <td>Nomor Handphone</td>
                                <td>08123456789</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>[email protected]</td>
                            </tr>
                             <tr>
                                <td>Nama Hotel</td>
                                <td>HARRIS Boutique Hotel & Conventions Suite Ciumbuleuit Bandung</td>
                            </tr>
                            <tr>
                                <td>Alamat Hotel</td>
                                <td>Jl. Awiligar Raya II No. 2, Cibeunying, Kab. Bandung, Jawa Barat, Indonesia</td>
                            </tr>
                        
                </tbody>
            </table>

SCSS

table{
				border-collapse:separate;
				width: 100%;
				border:1px solid $color-title-table;
				border-radius: 8px;
				thead{
					th{
						background: $color-title-table;
						padding: 8px;
						border-top: none;
						&:first-child{
							border-left:none;
						}
					}
				}
				tbody{	
					tr{
						&:last-child{
						}
					}
					--border: 1px solid $color-title-table;
					td{
						border-left:1px solid $color-title-table;
						border-right:1px solid $color-title-table;
						padding: 8px;
						&:first-child{
							padding-left: 32px;
							width: 35%;
							border-right:none;
							border-left:none;
						}
						&:last-child{
							width:65%;
							border-left:none;
							border-right:none;	
						}
					}
				}
			}