CODEWITHSUNDEEP
css
praks5432
praks5432

Reputation: 7792

Setting column-width not working

So I have a table inside a div 

<div class="table-container">
  <div class="table-wrapper">
    <table class="some-table"/>
  </div>
</div>

I have 

.table-container {
  width: 100%;
}

.some-table {
  column-width: 50px;

}

this doesn't seem to set the width of the columns. I also tried doing the same with the td elements, the only effect seems to be to increase the width of the columns if the original width was lower than 50px.

How do I set the column width to be something I want?

Upvotes: 0

Views: 6882

Answers (2)

Adrift
Adrift

Reputation: 59799

You should know that the column-width and column-count properties (and most other column-* properties) don't apply to tables, as stated in the Multi-column Layout Module

Name: column-width

Applies to: non-replaced block-level elements (except table elements), table cells, and inline-block elements

Upvotes: 2

Ishan Jain
Ishan Jain

Reputation: 8171

I think it's browser issue, please try this: 

.some-table {
    column-width:50px;
    -moz-column-width:50px; /* Firefox */
    -webkit-column-width:50px; /* Safari and Chrome */
}

Upvotes: 0

Related Questions