<fieldset>样式不起作用

Question

样式<fieldset>的工作方式很奇怪。在谷歌浏览器中，div适合内容。

＆＃13;

＆＃13;

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
}

＆＃13;

<fieldset class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;

而我想要的是

＆＃13;

＆＃13;

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
}

＆＃13;

<div class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我如何将<fieldset>看起来像后者？

Answer 1

当您将字段集的宽度设置为100％时，您将字段集的边框宽度设置为100%。它不会改变其中div（s）的宽度。因此，您需要设置div标记内的fieldset个样式。

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
  width: calc(100vw * 1/3);
}

<fieldset class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</fieldset>

Answer 2

我意识到在另一个div中浮动fieldset cell div可以到达那里

 .table {
 border: none;
 border-collapse: collapse;
 display: table;
 margin: 0;
 padding: 0;
 table-layout: fixed;
 }

 .father{
 width: 100%;
 height: 50px;
 }

 .cell {
 background: #ccc;
 border: 1px solid black;
 display: table-cell;
 width: 30%;
 height: 50px;
 float: left;
 }

 <fieldset class="table">
     <div class="father">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
     </div>
 </fieldset>

Answer 3

＆＃13;

＆＃13;

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
  padding-right: 31em;
}

＆＃13;

<fieldset class="table">
  <div class="cell">1</div>
   <div class="cell">2</div>  
   <div class="cell">3</div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;