CODEWITHSUNDEEP
htmlcsshtml-table
Jeyarathnem Jeyachanthuru
Jeyarathnem Jeyachanthuru

Reputation: 1189

Nested table width issue

I have a problem with nested table width issue. I need to make table as responsive. Like following image. This is my code DEMO

enter image description here

HTML

<div class="layout">
  <div class="left">Left</div>
  <div class="right">
    <div class="table-responsive">
      <table>
        <tr>
          <th>Sample Headding</th>
          ...
        </tr>
        <tr>
          <td>Sample Headding</td>
          ...
        </tr>
        </table>
    </div>
  </div>
</div>

CSS

.layout {
  width: 800px;
  display: table;
}
.layout .left, .layout .right {
  display: table-cell;
}
.layout .left {
  width: 25%;
  background: #eee;
}

.table-responsive {
  width: 100%;
  margin-bottom: 15;
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #CCC;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table > thead > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > tfoot > tr > td {
  white-space: nowrap;
}

Upvotes: 1

Views: 2042

Answers (2)

user3423017
user3423017

Reputation:

As much i know tables cannot be made responsive. Instead of tables use div and give them width in % that will be responsive.

Upvotes: 0

Manu
Manu

Reputation: 846

Have you tried " table-layout:fixed; " property ?

JSFIDDLE: http://jsfiddle.net/manublueheart/c6CdL/3/

.layout {
 width: 800px;
 display: table;
 table-layout:fixed;     
}

Upvotes: 1

Related Questions