Я хотел сделать таблицу, аналогичную приведенной ниже:
Однако, как показано на скриншоте ниже, версия HTML вышла по-другому. Это довольно близко к тому, что я хочу сделать, но левая и правая ширина не равны, как я хочу. Вот скриншот:
Вот мой код:
# Empty CSS file for your own CSS
table {
border-collapse: collapse;
width: #D19F24;
border: 1px solid #ddd;
}
td{
text-align: center;
font-weight: bold;
border: 1px solid black;
}
tr{
text-align: center;
font-weight: bold;
}
.head{
text-align: center;
}
.footer{
text-align: left;
}
tr:nth-child(even){background-color:#D19F24;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table responsive</title>
<meta name="description" content="made by Mitesh Chakma">
<meta name="author" content="Mitesh Chakma">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div style="overflow-x:auto;">
<table>
<tr>
<td colspan="2"><a style="color:#D19F24;">Fabric Details</a></td>
</tr>
<tr>
<td >Composition</td>
<td>NA</td>
</tr>
<tr>
<td>Colour <a style="color:#71B18F;">*</a></td>
<td>NA</td>
</tr>
<tr>
<td>Weight (g/m) <a style="color:#ff0000;">**</a></td>
<td>NA</td>
</tr>
<tr>
<td>Length (Meter)<a style="color: #ff0000;">***</a></td>
<td>NA</td>
</tr>
<tr>
<td>Width (cm)<a style="color:#ff0000;">****</a></td>
<td>NA</td>
</tr>
<tr>
<td>Name Edge</td>
<td>NA</td>
</tr>
<tr>
<td>Reference</td>
<td>NA</td>
</tr>
<tr>
<td>Additional Information</td>
<td>NA</td>
</tr>
<td colspan="2">
<p><a style="color:#ff0000;">*</a>Please be aware, the colour of the fabric on screen may differ from the actual fabric, depending on screen settings and other factors.</p>
<p><a style="color:#71B18F;">*</a>Other colours may be available. Please check our other listings, visit our eBay shop/website or contact us</p>
<p><a style="color:#ff0000;">**</a>The weight is always measured in grams per meter unless stated otherwise.</p>
<p><a style="color:#ff0000;">***</a>The length stated in the Fabric Details is what you will receive when you purchase buy it now. More Lengths/custom lengths maybe available so get in touch with us</p>
<p><a style="color:#ff0000;">****</a>The width is always in centimetres (CM) unless stated otherwise.</p>
</td>
</table>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Я довольно новичок в этом и не могу понять, как добиться того, чего я хочу. Кроме того, если я хочу сделать эту таблицу отзывчивой, что я должен делать?