Rounded tables in Twitter Bootstrap 3

前端 未结 10 824
清酒与你
清酒与你 2020-12-24 05:02

Bootstrap 3 has dropped rounded corners on tables. Which styles should I apply to get them back when I apply the .table-bordered class, please?

10条回答
  •  情歌与酒
    2020-12-24 05:34

    If you have only 1 cell in the first row or last row this one will work.

    (Added a fix to the code of: Ruben Stolk)

    .table-curved {
      border-collapse: separate;
      border: solid @table-border-color 1px;
      border-radius: @border-radius-base;
      border-left: 0px;
      border-top: 0px;
      > thead:first-child > tr:first-child > th {
        border-bottom: 0px;
        border-top: solid @table-border-color 1px;
      }
      td, th {
        border-left: 1px solid @table-border-color;
        border-top: 1px solid @table-border-color;
      }
      > :first-child > :first-child > :first-child {
        border-radius: @border-radius-base 0 0 0;
      }
      > :first-child > :first-child > :last-child {
        border-radius: 0 @border-radius-base 0 0;
      }
      > :first-child > :first-child > :only-child{
        border-radius: @border-radius-base @border-radius-base 0 0;
      }
      > :last-child > :last-child > :first-child {
        border-radius: 0 0 0 @border-radius-base;
      }
      > :last-child > :last-child > :last-child {
        border-radius: 0 0 @border-radius-base 0;
      }
      > :last-child > :last-child > :only-child{
        border-radius: 0 0 @border-radius-base @border-radius-base;
      }
    }
    

提交回复
热议问题