Bootstrap 4 - 表格中特定单元格的边框颜色

时间:2018-05-10 19:51:15

标签: html css twitter-bootstrap bootstrap-4

我正在尝试为特定单元格应用边框颜色(红色),看起来颜色不适用于单元格的顶部和左侧。

看起来其他单元格的边框颜色覆盖了我尝试应用的颜色。

.border-red
{
 border:red solid 1px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="col-6">
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Test User 1</td>
<td>10</td>
</tr>
<tr>
<td>Test User 2</td>
<td class="border-red">90</td>
</tr>
<tr>
<td>Test User 3</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

请告诉我您解决此问题的建议。提前谢谢。

3 个答案:

答案 0 :(得分:2)

这是因为您border-collapse: collapse;将其更改为border-collapse: separate;(来自Bootstrap .table类),如果您不想要单元格之间的排水沟,请添加border-spacing: 0;

table.table {
      border-collapse: separate;
      border-spacing: 0;
}

.border-red
{
 border:red solid 1px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="col-6">
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Test User 1</td><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="col-6">
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Test User 1</td>
<td>10</td>
</tr>
<tr>
<td>Test User 2</td>
<td class="border-red">90</td>
</tr>
<tr>
<td>Test User 3</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<td>10</td>
</tr>
<tr>
<td>Test User 2</td>
<td class="border-red">90</td>
</tr>
<tr>
<td>Test User 3</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

答案 1 :(得分:2)

添加显示:块;风格,你会很高兴。

.border-red
    {
     border:red solid 1px !important;
        display: block;
    }

答案 2 :(得分:1)

删除Program monkeying_with_dct Use, Intrinsic :: ISO_C_BINDING Implicit None include 'fftw3.f03' Integer, Parameter :: dp = C_Double Complex(C_double), Pointer :: c_in (:,:) Complex(C_double), Pointer :: c_out(:,:) Real(C_Double), Pointer :: r_out(:,:) Real(C_Double), Pointer :: ptr2real_in (:,:) Real(C_Double), Pointer :: ptr2real_out(:,:) Real(C_Double), Pointer :: ptr2imag_in (:,:) Real(C_Double), Pointer :: ptr2imag_out(:,:) Type(C_ptr) :: cptr Type(C_ptr) :: plan_IDCT Type(C_ptr) :: plan_C2R Type(C_ptr) :: pdum Integer, Parameter :: NX = 512 Integer, Parameter :: NY = 1024 print *,'... allocating memory ...' pdum = fftw_alloc_complex(int((NY/2+1)*NX, C_size_T)) Call C_F_Pointer(pdum, c_in , [NX, NY/2+1]) pdum = fftw_alloc_complex(int((NY/2+1)*NX, C_size_T)) Call C_F_Pointer(pdum, c_out, [NX, NY/2+1]) pdum = fftw_alloc_real(int(NY*NX, C_size_T)) Call C_F_Pointer(pdum, r_out, [NX, NY]) print *,'... initializing data ...' c_in = Cmplx(0._dp, 0._dp, Kind=dp) c_in(2,3) = Cmplx(1._dp, 0.5_dp, Kind=dp) print *, '... defining a pointer to the real part of input complex data ...' cptr = C_loc(c_in(1,1)) Call C_F_Pointer(cptr, ptr2real_in, [2*NX, (NY/2+1)]) print *, '... defining a pointer to the imag part of input complex data ...' cptr = C_loc(c_in(1,1)) Call C_F_Pointer(cptr, ptr2imag_in, [2*NX, (NY/2+1)]) cptr = C_loc(ptr2imag_in(2,1)) Call C_F_Pointer(cptr, ptr2imag_in, [2*NX, (NY/2+1)]) print *, '... defining a pointer to the real part of transformed complex data ...' cptr = C_loc(c_out(1,1)) Call C_F_Pointer(cptr, ptr2real_out, [2*NX, (NY/2+1)]) print *, '... defining a pointer to the imag part of transformed complex data ...' cptr = C_loc(c_out(1,1)) Call C_F_Pointer(cptr, ptr2imag_out, [2*NX, (NY/2+1)]) cptr = C_loc(ptr2imag_out(2,1)) Call C_F_Pointer(cptr, ptr2imag_out, [2*NX, (NY/2+1)]) print*, '... planning IDCT ...' plan_IDCT = fftw_plan_many_r2r(1, [NX], (NY/2+1), & ptr2real_in, [2*NX], 2, 2*NX, & ptr2real_out, [2*NX], 2, 2*NX, & [FFTW_REDFT01] , FFTW_MEASURE) print*, '... planning C2R DFT ...' plan_C2R = fftw_plan_many_dft_c2r(1, [NY], NX, & c_out, [NY/2+1], NX, 1, & r_out, [NY], NX, 1, & FFTW_MEASURE) print*, '... DCT of the real part ...' Call fftw_execute_r2r(plan_IDCT, ptr2real_in, ptr2real_out) print*, '... DCT of the imaginary part ...' Call fftw_execute_r2r(plan_IDCT, ptr2imag_in, ptr2imag_out) print*, '... DFT Complex to real ...' Call fftw_execute_dft_c2r(plan_C2R, c_out,r_out) End Program monkeying_with_dct 类并将其替换为border-collapse: collapse;