文章/答案/技术大牛

发布

问使用flex加倍CSS边框
EN

Stack Overflow用户

提问于 2021-05-11 08:38:50

回答 1查看 91关注 0票数 0

我有一块CSS我正在使用。每当我向.student添加"display: flex“属性时，边框突然加倍。我需要flex属性，因为我希望文本在.student表格数据单元格内的图像旁边垂直居中。我怎样才能摆脱这个讨厌的双重边界呢？每当我删除display:flex属性时，双边框就消失了，但是文本不再垂直地靠近图像。我尝试过空格、边框折叠和其他几种方法，但都没有成功。

Codepin：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

Stack Overflow用户

发布于 2021-05-11 09:20:52

你可以试试这个，而不是使用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>

票数 0

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67479163

复制

相似问题

问使用flex加倍CSS边框
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用flex加倍CSS边框EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用flex加倍CSS边框
EN