Bootstrap 使用CSS的圆形边框表

bmp9r5qi  于 12个月前  发布在  Bootstrap
关注(0)|答案(6)|浏览(105)

我有一个问题。我有一个用纯HTML代码制作的表,下面是它:

<table id="calendarTable">
  <tr>
    <th id="tableHeader" colspan=7></th>
  </tr>
  <tr>
    <th>Dom</th>
    <th>Seg</th>
    <th>Ter</th>
    <th>Qua</th>
    <th>Qui</th>
    <th>Sex</th>
    <th>Sáb</th>
  </tr>
  <tbody id="tableBody"></tbody>
  <tr>
    <td colspan=7>
    <p>
      <form id="dateChooser" name="dateChooser">
        <select name="chooseMonth" onChange="populateTable(this.form)">
          <option selected>Janeiro
          <option>Fevereiro
          <option>Março
          <option>Abril
          <option>Maio
          <option>Junho
          <option>Julho
          <option>Agosto
          <option>Setembro
          <option>Outubro
          <option>Novembro
          <option>Dezembro
        </select>
        <select name="chooseYear" onChange="populateTable(this.form)">
        </select>
      </form>
    </p>
    </td>
  </tr>
</table>

字符串
下面是我的CSS:

#calendarTable {
  text-align: center;
  width: 80%;
  height: 100%;
  color: #18B6E6;
  border-color: #18B6E6;
  border: solid 1px;
  border-radius: 20px;
}

#calendarTable td {
  border: solid 1px;
  border-radius: 4px;
}

#calendarTable th {
  border: solid 1px;
  font-weight: 700;
}


我想只使用CSS来圆化边界,我只是尝试使用border-radius属性,但我的表没有改变边界。
有人能给我个建议吗?
先谢谢你了!

50pmv0ei

50pmv0ei1#

下面是一个应用了边框半径的简化表格。技巧是设置单元格的左边框而不是表格本身。它可以使用或不使用thead,我已经注解了css以显示我在做什么。

/*
 * First normalise some of the attributes
 */

table td,
table th {
  padding: .5rem;
  text-align: left;
  vertical-align: top;
}
/*
 * Add the border, set border spacing etc
 * The left width is 0 so cell border can be applied without doubling up.
 */

.table-bordered {
  border: 1px solid silver;
  border-left-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
}
/*
 * Add the border to table cell/header
 */

.table-bordered td,
.table-bordered th {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
/*
 * Remove the top border from the first header/cell
 */

.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
  border-top-width: 0;
}
/*
 * Set the border radius for the first header/cell
 */

.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
  border-top-left-radius: 1rem;
}
/*
 * Set the border radius for the last header/cell
 */

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
  border-bottom-left-radius: 1rem;
}

个字符

3lxsmp7m

3lxsmp7m2#

正如其他人所说,这是应该给予您想要的外观的代码。

代码

#RoundedTable {
  border: 1px solid black;
  border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 3px;
}

个字符

注意事项

不过,要做到这一点,您需要确保将表的border-collapse设置为separate而不是collapse。否则,单元格的半径和整个表的半径都不起作用。
所以仔细检查可能影响你的表的其他CSS,如果你发现border-collapse: collapse;在任何地方,那就是问题所在。

rn0zuynd

rn0zuynd3#

#calendarTable{

    border-radius:20px;
}

字符串
DEMO

vkc1a9a2

vkc1a9a24#

删除表格上的border属性。浏览器仍然支持它,但它是removed from HTML5 specification。该属性产生的效果可能不是你想要的。
如果你想在表格中的每个单元格周围设置边框,只需在CSS中指定,并在其中包含border-radius即可。

#calendarTable td { border: solid 1px; border-radius: 4px; }

字符串
如果你只是想在整个表格周围使用边框,那么在表格选择器上使用相同的css:

#calendarTable { border: solid 1px; border-radius: 4px; }

2hh7jdfx

2hh7jdfx5#

border-radius似乎在tabletd元素上都可以工作,无论table上是否有border属性。
你必须有一些其他的CSS规则来发挥作用。

table {
  border: 1px solid blue;
  border-radius: 10px;
}
table td, table th {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 5px;
}

个字符

lsmepo6l

lsmepo6l6#

基于on作为顺风:

.table-bordered {
    @apply w-full border-separate border-spacing-0 overflow-clip rounded-lg border border-l-0;
}

.table-bordered td,
.table-bordered th {
    @apply border-l border-t text-left align-top;
}

.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
    @apply border-t-0;
}

.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
    @apply rounded-tl-lg;
}

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
    @apply rounded-bl-lg;
}

字符串

相关问题