CODEWITHSUNDEEP
htmlcss
user13286
user13286

Reputation: 3075

Why don't my table rows take up 100% width of the table?

I am creating a table out of divs using CSS. For some reason, the rows do not take up 100% width, so the headings end up being out of alignment. My desired result is to have the table take up 100% width. Then I would like the first column of the header/body to take up 4% of that and I would like the second column of the header/body to take up 20% of that and then the remaining columns should all be the same width and take up the remaining space.

.table {
  display:table;
  width:100%;
}
  .table-row {
    display:table-row;
    width:100%;
  }
    .table-row > div {
      display:table-cell;
    }
      .table-row > div:first-child {
        width:4%;
      }
      .table-row > div:nth-child(2) {
        width:20%;
      }
<div class="table">
	<div class="table-header">
		<div class="table-row">
			<div></div>
			<div>Product Name</div>
			<div>Product Size</div>
			<div>Quantity</div>
			<div>Color</div>
			<div>Price</div>
			<div>Sub-Total</div>
			<div></div>
		</div>
	</div>
	<div class="table-body">
		<div class="table-row">
			<div>1.</div>
			<div>Shirt</div>
			<div>Small</div>
			<div>3</div>
			<div>Blue</div>
			<div>$10</div>
			<div>$30</div>
			<div></div>
		</div>
		<div class="table-row">
			<div>2.</div>
			<div>Pants</div>
			<div>Medium</div>
			<div>2</div>
			<div>Blue</div>
			<div>$40</div>
			<div>$80</div>
			<div></div>
		</div>
	</div>
</div>

Upvotes: 0

Views: 1172

Answers (2)

WillW
WillW

Reputation: 195

agreeing with the other comments. Use a table, for both simplicity and accessibility (How will Google and assistive technologies know that's a table?)

If you're set on using divs though, below is a solution. You were missing the display: table-header-group; and display: table-row-group styles for your thead and tbody elements. Enjoy!

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
  width: 100%;
}

.table-header {
  display: table-header-group;
  }
.table-body {
  display: table-row-group;
  }

.table-row>div {
  display: table-cell;
  border: 1px solid #f2f2f2; /* Not necessary */
}

.table-row>div:first-child {
  width: 4%;
}

.table-row>div:nth-child(2) {
  width: 20%;
}
<div class="table">
  <div class="table-header">
    <div class="table-row">
      <div></div>
      <div>Product Name</div>
      <div>Product Size</div>
      <div>Quantity</div>
      <div>Color</div>
      <div>Price</div>
      <div>Sub-Total</div>
      <div></div>
    </div>
  </div>
  <div class="table-body">
    <div class="table-row">
      <div>1.</div>
      <div>Shirt</div>
      <div>Small</div>
      <div>3</div>
      <div>Blue</div>
      <div>$10</div>
      <div>$30</div>
      <div></div>
    </div>
    <div class="table-row">
      <div>2.</div>
      <div>Pants</div>
      <div>Medium</div>
      <div>2</div>
      <div>Blue</div>
      <div>$40</div>
      <div>$80</div>
      <div></div>
    </div>
  </div>
</div>

Upvotes: 2

Joint
Joint

Reputation: 1218

In this structure the role of table head plays '.table-header' so add rules for that class with 'display: table-header-group' and second one for '.table-body' with 'display: table-row-group'

Upvotes: 1

Related Questions