Question

我在尝试删除下表单元格周围的蓝色边框时遇到了很多麻烦。无论我做什么，蓝色仍然存在。我有什么明显的遗失吗？

<html>
   <style type="text/css">
      #outerdiv{
         width: 140px; 
         height:185px;  
         overflow-x: auto; 
         overflow-y: hidden;
      }
      table{
         display: block;  
         width: 280px; 
         background-color: blue;
      }
      thead{
         max-width: 280px; 
         display: block; 
      }
      thead tr{
         height: 45px; 
         width: 280px;
      }
      thead tr td{
         width: 70px;
      }
      tbody{
         max-height: 140px; 
         display: block; 
         overflow-y: auto
      }
      tbody tr{
         height: 70px;
      }
      tbody tr td{
         width: 70px;
      }
      td{ 
         background-color: red;
         border:0px solid #D0D0D0 !important;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         width: 70px;
      }
   </style>
   <body>
      <div id="outerdiv">
         <table >
            <thead>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>>4</td>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3/td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

如果我将边框设置为10px：

td{ 
         background-color: red;
         border:10px solid #D0D0D0 !important;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         width: 70px;
      }

你可以看到它设置边框，但蓝色仍然存在。我需要蓝色消失，但不要将它设置为红色，使细胞长大以填充该区域。

Answer 1

只需从表中删除background-color:blue即可

`<html>
   <style type="text/css">
      #outerdiv{
         width: 140px; 
         height:185px;  
         overflow-x: auto; 
         overflow-y: hidden;
      }
      table{
         display: block;  
         width: 280px; 

      }
      thead{
         max-width: 280px; 
         display: block; 
      }
      thead tr{
         height: 45px; 
         width: 280px;
      }
      thead tr td{
         width: 70px;
      }
      tbody{
         max-height: 140px; 
         display: block; 
         overflow-y: auto
      }
      tbody tr{
         height: 70px;
      }
      tbody tr td{
         width: 70px;
      }
      td{ 
         background-color: red;
         border:0px solid #D0D0D0 !important;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         width: 70px;
      }
   </style>
   <body>
      <div id="outerdiv">
         <table >
            <thead>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>>4</td>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3/td>
                  <td>4</td>
               </tr>
               <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>`

希望它有所帮助。

Answer 2

是的，你正在寻找border-collapse

参见示例here

此处提供更多信息：https://www.w3schools.com/cssref/pr_border-collapse.asp

：）

Answer 3

-webkit-box-shadow: 0px 0px 0px 10px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 10px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 10px rgba(255,0,0,1);

为什么不使用box-shadow？

或

outline: red solid thick;

  td{ 
     background-color: red;
     outline: red solid thick;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     width: 70px;
  }

https://www.w3schools.com/cssref/pr_outline.asp

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Answer 4

我认为您可以使用border-collapse属性解决所需的功能。
检查以下

table {
    display: block;
    width: 280px;
    background-color: blue;
    border-collapse: collapse;
}

它会像上面那样：

HTML：是否始终可以删除表格单元格边框？

4 个答案: