Question

我想制作一张类似于以下所示的表格：

但是，如下面的屏幕截图所示，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>

我对此很陌生，无法弄清楚如何实现自己想要的目标。此外，如果我想使该表具有响应性，该怎么办？

Answer 1

您应该将<rule name="OrderDetails" stopProcessing="true"> <match url="^projects/offer_details.aspx$" /> <conditions logicalGrouping="MatchAll" trackAllCaptures="true"> <add input="{QUERY_STRING}" pattern="artistID=(\d+)" /> <add input="{QUERY_STRING}" pattern="projectID=(\d+)" /> <add input="{QUERY_STRING}" pattern="recordID=(\d+)" /> <add input="{QUERY_STRING}" pattern="selection=(\d+)" /> <add input="{QUERY_STRING}" pattern="salesTypeID=(\d+)" /> </conditions> <action type="Redirect" url="/projects/OfferDetails/{C:1}/{C:2}/{C:3}/{C:4}/{C:5}" appendQueryString="false" /> </rule>元素中的width设置为td，以使它们每个都占据可用50%空间的一半（因此宽度相等）。此外，您的table的{{1}}值当前是一种颜色（table）-尝试将其设置为width。

#D19F24

100%

关于使其具有响应性，这是一个相当广泛的查询，可以解释。您已经在使用一个容器，其中table { border-collapse: collapse; width: 100%; border: 1px solid #ddd; } td { text-align: center; width: 50%; 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; }设置为<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>，并使用相对单位，并且包含一个有助于响应的overflow-x auto标签。

如何使表格中的两列具有相同的宽度？

1 个答案: