Question

我需要更改html <table>才能使其响应，但我想只使用css

table{
  width:100px;
  height:100px;
  background:green;
}

.a{
   width:100% !important;
  background-color:Red; 
 
}

<table>
  <tbody>
     <tr>
         <td class="a">AAA</td>
         <td class="b">BBB</td>
         <td class="c">CCC</td>
     </tr>   
      
  </tbody>
</table>

我想要的是什么：

在不改变HTML的情况下，我希望屏幕的宽度为100％，以及下面的“BBB”+“CCC”（在BBB下的BBB：50％宽度，以及“CCC”）宽度）

我正在尝试没有成功，请帮忙吗？

Answer 1

您是否反对更改table的默认.a{ width:100%; background-color:Red; } .b, .c { width: 49%; display: inline-block } table, tbody, tr, td { display: block; }？

如果不是，你可以这样做

.top-bar.expanded .title-area {
    background: #01545b;
    width:350px;
}
#actions-sidebar {
    background: #fafafa;
    width:350px;
}

Fiddle

Answer 2

你可以使用float，但这种做法否定了首先使用表格的意义。

如果这不是表格数据（并且布局表明它不是），那么你真的应该寻找另一种HTML结构。

＆＃13;

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  width: 100%;
}
td {
  width: 110px;
  float: left;
  width: 50%;
  border: 1px solid grey;
}
td.a {
  width: 100%;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td class="a">AAA</td>
      <td class="b">BBB</td>
      <td class="c">CCC</td>
    </tr>

  </tbody>
</table>

＆＃13;

如何使用HTML表并只用一个多行？

2 个答案: