Question

我想创建一个只有div标签的表格。我只用了两节课，效果很好唯一的问题是表格内的单元格边框有两个宽度的表格边框，看起来很难看。我知道原因是所有细胞都有边界但我无法解决它。我在其他帖子中尝试了一些解决方案，但在这种情况下它不起作用有人可以帮帮我吗？非常感谢。请注意，我不想添加更多类。

.row { 
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border: solid 2px blue;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center; 
}

<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
</div>

Answer 1

您可以添加等于边框宽度的负边距top和left。

.row { 
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border: solid 2px blue;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center; 
  margin-left: -2px;
  margin-top: -2px;
}

<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
</div>

Answer 2

您可以添加CSS以在某些条件下覆盖边框...

.row {
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border: solid 2px blue;
  border-top: none;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center;
}

.col+.col {
  border-left: none;
}

.row:first-of-type .col {
  border-top: solid 2px blue;
}

.row .row .col {
  border-top: none;
}

<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
</div>
<div class="row">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>
<div class="row">
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
  </div>
</div>

Answer 3

您可以添加一个类来包装内容并添加一些样式，如：

    .table{
      border: 2px solid blue;
     }
    .row { 
      height: 100%;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
    }

    .col {
      border: solid 2px blue;
      padding: 5px;
      margin: 0;
      min-height: 1px;
      flex-grow: 1;
      max-width: 100%;
      text-align: center; 
    }

    <div class="table">
    <div class="row">
      <div class="col">x</div>
      <div class="col">x</div>
    </div>
    <div class="row">
      <div class="col">x</div>
    </div>
    <div class="row">
      <div class="col">x</div>
      <div class="col">x</div>
      <div class="col">x</div>
    </div>
    <div class="row">
      <div class="row">
        <div class="col">x</div>
        <div class="col">x</div>
      </div>
      <div class="row">
        <div class="col">x</div>
        <div class="col">x</div>
      </div>
    </div>
    </div>

Answer 4

这是因为col类边框的样式会应用于两个相邻的列[cells]。如果您不想添加课程，请尝试提供＆＃34; id＆＃34;在CSS中定义样式，或者给出内联样式。 通常可以避免CSS中的负值。

CSS：

.row { 
  height: 100%;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.col {
  border-right: solid 2px black;
  border-top: solid 2px black;
  padding: 5px;
  margin: 0;
  min-height: 1px;
  flex-grow: 1;
  max-width: 100%;
  text-align: center; 
}

HTML：

<div style="border: solid 2px black;">
  <div class="row">
    <div style="border-top: none" class="col">x</div>
    <div style="border-top: none; border-right: none" class="col">x</div>
  </div>
  <div class="row">
    <div style="border-right: none" class="col">x</div>
  </div>
  <div class="row">
    <div class="col">x</div>
    <div class="col">x</div>
    <div style="border-right: none" class="col">x</div>
  </div>
  <div class="row">
    <div class="row">
      <div class="col">x</div>
      <div style="border-right: none" class="col">x</div>
    </div>
    <div class="row">
      <div class="col">x</div>
      <div style="border-right: none" class="col">x</div>
    </div>
  </div>
</div>

Answer 5

@Duanxx

我的回答解释：

请查看以下代码。For code 1

<html>
  <head>
    <style type="text/css">
      .parentDiv{
        background-color: black;
        justify-content: space-around;
        display: flex;
      }
      .childDiv{
        width: 50%;
        height:100px;
        font-size: 30px;
        margin: 10px 10px;
      }
    </style>
  </head>
  <body>
    <div class="parentDiv">
        <div class="childDiv" style="background-color: pink">Child 1</div>
        <div class="childDiv" style="background-color: bisque">Child 2</div>
    </div>

  </body>
</html>

现在看看这个：

<html>
  <head>
    <style type="text/css">
      .parentDiv{
        background-color: black;
        justify-content: space-around;
        display: flex;
      }
      .childDiv{
        width: 50%;
        height:100px;
        font-size: 30px;
        margin: -5px 10px;
      }
    </style>
  </head>
  <body>
    <div class="parentDiv">
        <div class="childDiv" style="background-color: pink">Child 1</div>
        <div class="childDiv" style="background-color: bisque">Child 2</div>
    </div>
  </body>
</html>

For code 2

比较两者。孩子应该在父母内部适合。这就是为什么不使用负边距的原因。

重叠的边界div

5 个答案: