Question

假设我在HTML页面上有这样的表格，th单元格周围有紫色边框，td单元格周围有绿色边框：

产生此代码的一些代码（view-small类的CSS未在上面的显示中使用，但它将被解释）：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Table Transformation</title>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>

<style>
body { font-family: "Opens Sans", sans-serif; }

td { border: 1px solid green; }
th { border: 1px solid purple; }

.view-small table { display: block; width: 100%; }
.view-small tbody { display: block; }
.view-small tr { display: block; width: 100%; margin: 2em auto; position; relative; }
.view-small th { display: block; width: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
.view-small td { display: inline-block; height: 1em; width: 30%; transform: translateY(1.5em); }

</style>
<body class="">
    <h1>Table Example</h1>

    <table>
        <tr>
            <th>Numbers</th>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
        <tr>
            <th>Countries</th>
            <td>Canada</td>
            <td>Mexico</td>
            <td>Guatemala</td>
        </tr>
        <tr>
            <th>Planets</th>
            <td>Mars</td>
            <td>Jupiter</td>
            <td>Saturn</td>
        </tr>
    </table>

    <p>End of test</p>

</body>

我们认为对于较小的设备，如果我们可以通过在相应的数据单元上显示每个行标题来节省水平空间，那将是很好的。如果我在上面的代码中在body标签中设置class="view-small"，我会在Windows上的Chrome中获取此内容，而在Firefox和IE11中则相同：

这证明了我的目标。我真正想要实现的目标包括让数据单元占据整行占用的水平空间。在上面的代码中，我将它们的宽度人工设置为30％，但这并不理想！

我会更多地修补这个，但我想我会看到是否有其他人尝试过这样的事情或者在某个地方找到过解决方案！

Answer 1

使用box-sizing:border-box作为盒子模型。

然后您可以通过应用（（100％/ 3） - 3px）将calc()用于width，将100％的屏幕除以3个框，然后从3px中减去border px每个box-sizing每个框，因为您正在使用*, *::before, *::after { box-sizing: border-box } body { font-family: "Opens Sans", sans-serif; margin: 0 } td { border: 1px solid green; } th { border: 1px solid purple; } .view-small table { display: block; width: 100%; } .view-small tbody { display: block; } .view-small tr { display: block; width: 100%; margin: 2em auto; position: relative; } .view-small th { display: block; width: 100%; position: absolute; left: 50%; transform: translateX(-50%); } .view-small td { display: inline-block; width: calc((100% / 3) - 3px); transform: translateY(1.5em); }

<body class="view-small">
  <h1>Table Example</h1>

  <table>
    <tr>
      <th>Numbers</th>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <th>Countries</th>
      <td>Canada</td>
      <td>Mexico</td>
      <td>Guatemala</td>
    </tr>
    <tr>
      <th>Planets</th>
      <td>Mars</td>
      <td>Jupiter</td>
      <td>Saturn</td>
    </tr>
  </table>

  <p>End of test</p>
</body>

collection.update_one({"_id": oid}, {"$set": request.json})

Answer 2

尝试更改宽度和边距值。宽度的总值（包括两个水平边距）应该在33％左右。这些＆＃3;＆＃39;点后使其更精确。

＆＃13;

div{
  width: 30.3333333333%;
  margin: 0 1.5%;
  display: inline-block;
  border: 1px solid black;
  height: 20px;
  box-sizing: border-box;
  float: left;
}

＆＃13;

<div></div>
<div></div>
<div></div>

＆＃13;

CSS在数据单元格上方显示表格行标题

2 个答案: