CSS 边框加倍伸缩

问题描述 投票：0回答：2

我正在使用一段 CSS。每当我将“display: flex”属性添加到 .student 时，边框就会突然加倍。我需要 flex 属性，因为我希望文本在 .student 表数据单元格内的图像旁边垂直居中。我怎样才能摆脱这个讨厌的双重边框？每当我删除 display:flex 属性时，双边框就会消失，但文本不再垂直位于图像旁边。我尝试过空白、边框折叠和其他几种，但没有任何运气。

代码针：https://codepen.io/dansbyt/pen/dyvoejG?editors=1100

CSS：

/* ------------{GRADEBOOK}------------ */
.gradebook {
  position: absolute;
  top: 60px; left: 0;
  width: 100vw; height: calc(100vh - 126px);
  overflow-y: scroll;
  box-sizing: border-box;}

/* Table styling*/
table {table-layout: fixed; border-collapse: collapse;}

/* Table heading styling */
thead th {
  height: 60px; width: 100px;
  top: 0; z-index: 2;
  position: -webkit-sticky; position: sticky;
  border-right: 1px solid gray;
  background-color: white;}
thead th:first-child {left: 0; z-index: 10;}

th {
  padding: 10px 16px;
  text-align: left;
  font-weight: normal;
  color: gray}

table .duedate {font-size: 14px; margin-bottom: 8px}
table .title {font-size: 18px; color: #5B7042}

/* Table data styling */
td {
  text-align: center;
  border: 1px solid gray;
  background-color: white}
td.late{background-color: #EA5D6B}

td input {
  text-align: center;
  padding: 4px; margin: 0;
  width: 114px;
  border: none;}
  
/* Student Name styling */
.student {
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center}

.pic{
  display: inline-block;
  width: 25px;
  clip-path: circle();
  margin-right: 10px;}
  .pic img{display: none}

/* ------------{CONTROLS}------------ */
.controls {
  display: flex;
  position: absolute;
  bottom: 10px; left: 0;
  width: 100vw; height: 56px;
  border-top: 1px solid #DDDDDD}

HTML：

<link rel="stylesheet" href="../style.css">

<div class='gradebook'>
  <table>
    <thead>
      <tr>
        <th style='width: 200px'></th>
        <th>
          <div class='duedate'>Due Oct 08</div>
          <div class='title'>Mayflower Vocabulary</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>Wax Museum</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>American Revolution</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 27</div>
          <div class='title'>Jamestown</div>
        </th>
        <th>
          <div class='duedate'>Due Nov 1</div>
          <div class='title'>Comparing Colonies</div>
        </th>
      </tr>
    </thead>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>Jane Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td class='late'><input type='text' value='10'></td>
      <td><input type='text' value='9.5'></td>
      <td><input type='text' value='10'></td>
      <td><input type='text' value='5'></td>
    </tr>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>John Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td><input type='text' value='8'></td>
      <td><input type='text' value='9'></td>
      <td><input type='text' value='10'></td>
      <td class='late'><input type='text' value='9'></td>
    </tr>
  </table>
</div>

<div class='controls'>
</div>

问题图片：

html css flexbox
2个回答
2
投票

我的假设是问题是由两种布局算法（表格算法和 Flex 算法）之间的冲突引起的。 Td 属于表一，将 flex 放在那里只会产生问题。

所以唯一的解决方案是用 div 包裹 td 内容，并将 flex 放在该 div 上。

table{
  border-collapse: collapse;
}

td{
  border: 1px solid;
}

.flex{
  display: flex;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <table>
            <th>flex</th>
            <th>flex</th>

            <tr>
                <td class='flex'>...</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td class='flex'>...</td>
            </tr>
        </table>
        
        <table>
            <th>div flex</th>
            <th>div flex</th>

            <tr>
                <td> <div class='flex'>...</div></td>
                <td> <div class='flex'>...</div></td>
            </tr>
            <tr>
                <td> <div class='flex'>...</div></td>
                <td> <div class='flex'>...</div></td>
            </tr>
        </table>
    </body>
</html>

1
投票

您可以尝试这个，而不是使用 

border: 1px solid gray
。

td {
  text-align: center;
  border: 1px solid gray;
  border-bottom: 0;
  border-right: 0;
  background-color: white
}

tr:last-of-type td {
  border-bottom: 1px solid gray;
}

td:last-of-type {
  border-right: 1px solid gray;
}


/* ------------{GRADEBOOK}------------ */

.gradebook {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 126px);
  overflow-y: scroll;
  box-sizing: border-box;
}


/* Table styling*/

table {
  table-layout: fixed;
  border-collapse: collapse;
}


/* Table heading styling */

thead th {
  height: 60px;
  width: 100px;
  top: 0;
  z-index: 2;
  position: -webkit-sticky;
  position: sticky;
  border-right: 1px solid gray;
  background-color: white;
}

thead th:first-child {
  left: 0;
  z-index: 10;
}

th {
  padding: 10px 16px;
  text-align: left;
  font-weight: normal;
  color: gray
}

table .duedate {
  font-size: 14px;
  margin-bottom: 8px
}

table .title {
  font-size: 18px;
  color: #5B7042
}


/* Table data styling */

td {
  text-align: center;
  border: 1px solid gray;
  border-bottom: 0;
  border-right: 0;
  background-color: white
}

tr:last-of-type td {
  border-bottom: 1px solid gray;
}

td:last-of-type {
  border-right: 1px solid gray;
}

td.late {
  background-color: #EA5D6B
}

td input {
  text-align: center;
  padding: 4px;
  margin: 0;
  width: 114px;
  border: none;
}


/* Student Name styling */

.student {
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: -1px;
}

.pic {
  display: inline-block;
  width: 25px;
  clip-path: circle();
  margin-right: 10px;
}

.pic img {
  display: none
}


/* ------------{CONTROLS}------------ */

.controls {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100vw;
  height: 56px;
  border-top: 1px solid #DDDDDD
}
<link rel="stylesheet" href="../style.css">

<div class='gradebook'>
  <table>
    <thead>
      <tr>
        <th style='width: 200px'></th>
        <th>
          <div class='duedate'>Due Oct 08</div>
          <div class='title'>Mayflower Vocabulary</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>Wax Museum</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 15</div>
          <div class='title'>American Revolution</div>
        </th>
        <th>
          <div class='duedate'>Due Oct 27</div>
          <div class='title'>Jamestown</div>
        </th>
        <th>
          <div class='duedate'>Due Nov 1</div>
          <div class='title'>Comparing Colonies</div>
        </th>
      </tr>
    </thead>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>Jane Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td class='late'><input type='text' value='10'></td>
      <td><input type='text' value='9.5'></td>
      <td><input type='text' value='10'></td>
      <td><input type='text' value='5'></td>
    </tr>
    <tr>
      <td class='student'>
        <img class='pic' src='../pics/default.png'>
        <span>John Doe</span>
      </td>
      <td><input type='text' value='-'></td>
      <td><input type='text' value='8'></td>
      <td><input type='text' value='9'></td>
      <td><input type='text' value='10'></td>
      <td class='late'><input type='text' value='9'></td>
    </tr>
  </table>
</div>

<div class='controls'>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.