Css表格边框样式:表CSS样式| 边框(table css styles)

我真的需要一些 CSS 的帮助。

我试图风格表,我有困难添加边框。

这是我要的表格样式(Photoshop):https://ibb.co/hFkCkDg

在表周围添加边框很简单:

.table-cl {
    border: 1px solid #dddddd !important;
    padding: 20px !important;
    border-radius: 5px;
}

截图:https://ibb.co/Fs6qsNv

要在表中添加分隔线,我需要在表中的行添加顶部或底部边框。行是tr元素。默认情况下,表的tr元素不接受边框。因此,为了克服这个问题,我在整个表中添加了{border-collapse: collapse !important;},这允许我在行 /周围添加边框。截图:

由于{border-collapse: collapse !important;},属性borderpaddingborder-radius不适用于表。

这意味着我可以在整个表周围添加边框或添加分隔线,但不能同时添加。

我怎样才能实现我要的外观?

3

我会使用 flexbox,并将flex: 1flex-grow: 1设置为每个“行”第一个子

* {margin:0; box-sizing: border-box;}
body {font: 16px/1.4 'Varela Round', sans-serif; padding: 20px;} /* DEMO ONLY */
/*
  Order
*/
.Order {
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 10px 25px
}
.Order-price {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.Order-price > * {
  padding: 10px 0;
}
.Order-price > *:first-child{
  flex: 1;
}
.Order-price:last-child {
  border-bottom: none;
}
.Order-price--sub {
  font-size: 1.2em;
  font-weight: 500;
}
.Order-price--tot {
  font-size: 1.4em;
  font-weight: 700;
}
/*
  Colors
*/
.color-lighter {
  color: #999;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googlea.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<div cl="Order">
  <div cl="Order-price">
    <span cl="color-lighter">Custom Tatoo Design - Small &times; 1</span>
    <span><s cl="color-lighter">$99.00</s> <b>$80.00</b></span>
  </div>
  <div cl="Order-price Order-price--sub">
    <span>Subtotal</span>
    <span>$80.00</span>
  </div>
  <div cl="Order-price Order-price--tot">
    <span>Total</span>
    <span><small>USD</small> $80.00</span>
  </div>
</div>
-1

使用表边框很无聊,我的建议是在td/th元素中使用边框。

我创建了这个表没有风格,只解决边界问题

   .table-cl {
    border: 1px solid #dddddd;
    border-radius: 6px;
    padding: 30px;
    border-spacing: unset;
    font-family: sans-serif;
    font-size: 1.5em;
}
.table-cl thead th {
    border-bottom: 1px solid #dddddd;
    text-align: left;
}
.table-cl tbody td {
    border-bottom: 1px solid #dddddd;
}
.table-cl td:last-child, .table-cl th:last-child {
    text-align: right;
}
.table-cl th, .table-cl td{
    padding: 10px;
}
<table cl="table-cl">
  <thead>
    <tr>
      <th>Custom Tattoo Desing - Small x 1</th>
      <th>
        <span><s>$99.00</s></span>
        <span>$80.00</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Subtotal</td>
      <td>$80.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>USD $80.00</td>
    </tr>
  </tfoot>
</table>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(493)
Total amount:分摊金额总计(square up payment methods)
上一篇
Web前端培训开发:前端 Web开发路线图(web development roadmap for beginners)
下一篇

相关推荐

  • js控制css:Welcome to my page!

    示例示例JS控制CSS指的是使用来改变HTML元素的CSS属性,以达到动态改变页面样式的目的。下面是一个简单的代码示例:…

    2023-01-26 08:41:05
    0 92 91
  • thymeleaf引入css:标题

    示例示例在中,可以使用th:href或 th:src属性引入css文件。示例代码:…

    2023-02-08 02:28:09
    0 64 88
  • css重叠 The Basics

    示例示例CSS重叠是指当多个元素在同一位置时,CSS会根据特定的规则来决定哪个元素最终显示在页面上。CSS重叠的规则:…

    2023-02-07 03:20:47
    0 58 27
  • css flex布局:和1个正文``` This is a title This is the body of the te

    CSS Flex 布局是 CSS3 新出现的布局模式,它可以灵活地在一个容器内排列元素,可以让元素在水平或垂直方向上排列,也可以让多个元素在同一行排列,还可以定义元素的大小比例。…

    2023-02-16 00:45:17
    0 99 23
  • css画图:Welcome to My Page

    示例示例CSS画图是使用CSS来创建图形的技术,可以创建简单的几何图形,如矩形、圆形、三角形等。代码示例:…

    2023-03-19 13:58:13
    0 61 71
  • css字体发光:Welcome To My Site

    使用CSS字体发光的方法有两种:使用text-shadow来实现:…

    2023-02-01 04:20:32
    0 89 45
  • 龙之崛起免cd补丁:在CSS中崛起(PPT)动画

    关于龙之崛起免cd补丁的问题,在riseupanimation中经常遇到,关于在CSS中崛起(PPT)动画的编程代码示例如下。…

    2022-11-23 08:46:25
    0 22 23
  • css 边框样式:**探索未知的世界**

    CSS 边框样式是用来定义 HTML 元素边框的样式。可以使用 border 属性来定义边框样式,该属性可以接受一个或多个值,其中包括边框宽度、边框样式和边框颜色。…

    2023-02-01 14:01:45
    0 68 57

发表评论

登录 后才能评论

评论列表(9条)