styling not working

Question

Styling <fieldset> is working oddly. In Google Chrome the divs are fit to content.

.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;
}

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

whereas what I want is

.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;
}

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

How can I style <fieldset> to look like this latter one?

https://stackoverflow.com/questions/9203561/fieldset-does-not-support-display-table-table-cell — Tamil Selvan C, Mar 30 '18 at 09:21
Adding width( say width: 100px; ) to the fieldset cell class will give what you want. But I'm still trying to understand why width : 33%; has no impact — hans-könig, Mar 30 '18 at 09:29

score 1 · Answer 1 · 2018-03-30T10:11:53.133

1

When you're setting the width of the fieldset to 100%, you are making the width of the border of the fieldset to 100%. It'll not change the width of the div(s) inside it. So you need to style the div(s) which are inside the fieldset tag.

.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>

edited Mar 30 '18 at 10:11

answered Mar 30 '18 at 09:58

Certainly the best solution – hans-könig Mar 30 '18 at 11:35
Thanks for your comment. – Mar 30 '18 at 11:37

hans-könig · Answer 2 · 2018-03-30T11:29:46.123

I realised that floating the fieldset cell divs inside another div can get there

 .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>

score 0 · Answer 3 · edited Mar 30 '18 at 12:33

.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;
}

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

styling not working

3 Answers3