Question

我试图通过使用css显示表和table-cell属性来显示与使用（balise表＆gt;和td＆gt;）相同的显示。

我不希望当行中只有一个单元格时，单元格的宽度为100％。

以下是代码：

<!DOCTYPE html>
    <html>
    <head>
      <style>
         .a{
         width: 400px;
         display:table;
         border-collapse:separate;
         border-spacing: .76923rem .76923rem;
         }
         .b{
         display:table-cell;
         padding: .76923rem .13923rem;
         width: 50%;
         vertical-align: middle;
         background:#333856;
         }
      </style>
    </head>
    <body>
      <div class= "a">
         <div class= "b"> 
            aaaaaa aaaaaaaaaa
         </div>
         <div class= "b"> 
            bbbbbbb bbbb
         </div>
      </div>
      <div class= "a">
         <div class= "b"> 
            cccc cccc
         </div>
      </div>
    </body>
    </html>

Answer 1

如果您移除display:table，则按预期方式工作。

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
      <style>
         .a{
         width: 400px;
         border-collapse:separate;
         border-spacing: .76923rem .76923rem;
         }
         .b{
         display:table-cell;
         padding: .76923rem .13923rem;
         width: 50%;
         vertical-align: middle;
         background:#333856;
         }
      </style>
    </head>
    <body>
      <div class= "a">
         <div class= "b"> 
            aaaaaa aaaaaaaaaa
         </div>
         <div class= "b"> 
            bbbbbbb bbbb
         </div>
      </div>
      <div class= "a">
         <div class= "b"> 
            cccc cccc
         </div>
      </div>
    </body>
    </html>

＆＃13;

当只有一个单元格时，显示表和表格单元格不同，<table> <tbody> <tr> <td>

1 个答案: