make width of <td> responsive to the outer <div>'s width - html

Question

I have a table inside of div and I am trying to set the width so that the columns on the output fill the whole div with id left.
Here is all the code and along with jsfiddle : https://jsfiddle.net/qsogubjd/
#sortPanel {
width: 565px;
height: 165px;
margin: 10px 15px;
display: block;
border: 0px solid #fff;
}
#sortPanel td {
height: 165px;
width: 11px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
padding: 0;
position: relative;
}
.cc {
display: block;
width: 5px;
position: absolute;
bottom: 0px;
background-color: #999;
border-top: 4px solid #fff;
margin: 0px;
margin-top: 4px;
}
.ccH1 {
display: block;
width: 5px;
background-color: #F22613;
margin: 0px;
position: absolute;
bottom: 0px;
}
.ccH2 {
display: block;
width: 5px;
background-color: #F2B705;
margin: 0px;
position: absolute;
bottom: 0px;
}
#left {
width: 590px;
height: 190px;
margin: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
border-top: 1px solid #555;
box-shadow: 0 1px 3px #000;
background: -webkit-linear-gradient(#444, #333);
background: -moz-linear-gradient(#444, #333);
background: -o-linear-gradient(#444, #333);
background: -ms-linear-gradient(#444, #333);
background: linear-gradient(#444, #333);
position: relative;
float: left;
}
<div id="left">
<table id="sortPanel">
<tr>
<td id="b0">
<div class="cc" style="height: 144px;"></div>
</td>
<td id="b1">
<div class="cc" style="height: 35px;"></div>
</td>
<td id="b2">
<div class="cc" style="height: 6px;"></div>
</td>
<td id="b3">
<div class="cc" style="height: 64px;"></div>
</td>
<td id="b4">
<div class="cc" style="height: 12px;"></div>
</td>
<td id="b5">
<div class="cc" style="height: 153px;"></div>
</td>
<td id="b6">
<div class="cc" style="height: 70px;"></div>
</td>
<td id="b7">
<div class="cc" style="height: 137px;"></div>
</td>
<td id="b8">
<div class="cc" style="height: 19px;"></div>
</td>
<td id="b9">
<div class="cc" style="height: 131px;"></div>
</td>
</tr>
</table>
</div>
So far I tried putting position: relative; on selectors, it didn't work. Then I tried display: block;, it didn't work either.
To make reading code easier:
The width attribute of td defines the seperation between the columns in the html output. Increasing the value of width will set columns further for each other, spreading them.
While width of div inside of td sets the width of column itself. Increasing this value will make colums thicker.
As far as I researched the solution should include %: width: someValue%.
How can I change the css code in order to spead the columns across the div with id "left" and make the whole table responsive?

Answer 1

The following caused the issue:
table#sortPanel has a display: block;
td.cc has a display: block;
table has a defined width (565px)
td has a defined width (5px)
td's naturally expand to occupy full width of the table without the need of any css.
When td's are given display: block, they loose this natural property.
Just remove these styles and td's will occupy full span of the table.
Give table a width: 100% and it'll occupy the full span of div#left.
Here is your code with modifications:
<div id="left">
<table id="sortPanel">
<tr>
<td id="b0">
<div class="cc" style="height: 144px;"></div>
</td>
<td id="b1">
<div class="cc" style="height: 35px;"></div>
</td>
<td id="b2">
<div class="cc" style="height: 6px;"></div>
</td>
<td id="b3">
<div class="cc" style="height: 64px;"></div>
</td>
<td id="b4">
<div class="cc" style="height: 12px;"></div>
</td>
<td id="b5">
<div class="cc" style="height: 153px;"></div>
</td>
<td id="b6">
<div class="cc" style="height: 70px;"></div>
</td>
<td id="b7">
<div class="cc" style="height: 137px;"></div>
</td>
<td id="b8">
<div class="cc" style="height: 19px;"></div>
</td>
<td id="b9">
<div class="cc" style="height: 131px;"></div>
</td>
</tr>
</table>
</div>
#sortPanel {
//width: 565px;
width: 100%;
height: 165px;
margin: 10px 0x;
//display: block;
display: table;
border: 0px solid #fff;
}
#sortPanel td {
height: 165px;
//width: 11px;
overflow: hidden;
//display: inline-block;
white-space: nowrap;
padding: 0;
position: relative;
vertical-align: bottom;
}
.cc {
display: block;
//width: 5px;
width: 100%;
//position: absolute;
bottom: 0px;
background-color: #999;
border-top: 4px solid #fff;
margin: 0px;
margin-top: 4px;
}
.ccH1 {
display: block;
width: 5px;
background-color: #F22613;
margin: 0px;
position: absolute;
bottom: 0px;
}
.ccH2 {
display: block;
width: 5px;
background-color: #F2B705;
margin: 0px;
position: absolute;
bottom: 0px;
}
#left {
width: 590px;
//height: 190px;
margin: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
border-top: 1px solid #555;
box-shadow: 0 1px 3px #000;
background: -webkit-linear-gradient(#444, #333);
background: -moz-linear-gradient(#444, #333);
background: -o-linear-gradient(#444, #333);
background: -ms-linear-gradient(#444, #333);
background: linear-gradient(#444, #333);
position: relative;
float: left;
}
https://jsfiddle.net/cpr4ztvj/

Answer 2

You have to delete some of the unnecessary attribute value pairs specifically related to display and position, those are very important in css, be sure to read up on them. I added the changes in the comments of css code and also I will share fiddle link to check the responsiveness https://jsfiddle.net/nukjh6ea/, now you may add up td s as you want.
#sortPanelA, sortPanelB {
width: 100%;/* occupy the whole width of div left */
height: 165px;
margin: 10px 15px;
border: 0px solid #fff;
}
#sortPanelA td, sortPanelB td {
height: 165px;
overflow: hidden;
white-space: nowrap;
padding: 0;
position: relative;
}
.cc {
display: block;
width: 50%;/* the width of column, you may play around with it */
position: absolute;
bottom: 0px;
background-color: #999;
border-top: 4px solid #fff;
margin: 0px;
margin-top: 4px;
}
.ccH1 {
display: block;
width: 5px;
background-color: #F22613;
margin: 0px;
position: absolute;
bottom: 0px;
}
.ccH2 {
display: block;
width: 5px;
background-color: #F2B705;
margin: 0px;
position: absolute;
bottom: 0px;
}
#left {
width: 90%;/* take up the 90% of body */
height: 190px;
margin: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
border-top: 1px solid #555;
box-shadow: 0 1px 3px #000;
background: -webkit-linear-gradient(#444, #333);
background: -moz-linear-gradient(#444, #333);
background: -o-linear-gradient(#444, #333);
background: -ms-linear-gradient(#444, #333);
background: linear-gradient(#444, #333);
position: relative;
float: left;
}
<div id="left">
<table id="sortPanelA">
<tr>
<td id="b0">
<div class="cc" style="height: 144px;"></div>
</td>
<td id="b1">
<div class="cc" style="height: 35px;"></div>
</td>
<td id="b2">
<div class="cc" style="height: 6px;"></div>
</td>
<td id="b3">
<div class="cc" style="height: 64px;"></div>
</td>
<td id="b4">
<div class="cc" style="height: 12px;"></div>
</td>
<td id="b5">
<div class="cc" style="height: 153px;"></div>
</td>
<td id="b6">
<div class="cc" style="height: 70px;"></div>
</td>
<td id="b7">
<div class="cc" style="height: 137px;"></div>
</td>
<td id="b8">
<div class="cc" style="height: 19px;"></div>
</td>
<td id="b9">
<div class="cc" style="height: 131px;"></div>
</td>
</tr>
</table>
</div>

Answer 3

Change .cc {width: 100%} and #sortPanelA td {width: 3.5rem}
EDIT
To make whole table responsive here are steps:
change div, table and tbody width to 100%
set table display: table
remove td width
set div.cc to 100%
set , not with css
Here is the code in fiddle: https://jsfiddle.net/meshin/uuL2f43g/

Answer 4

You're mixing and matching different block models without understanding what they do. A table block model is pretty responsive by default and by adding blocks and inline-blocks to things you're complicating matters.
Remove all the display: block and display: inline-block from your table elements. Then set the .cc div to 100% width of the table cell. Your table will then scale to whatever you need. If you want it 100% set the table to 100%.
See example:
https://jsfiddle.net/mede6n8j/
Steps to fix:
Remove display: block; from #sortPanelA, sortPanelB
Remove display: block and display:inline-block; from #sortPanelA td, sortPanelB td
Remove width: 11px; from #sortPanelA td, sortPanelB td
Change width: 5px; to width: 100% on .cc. This will make the divs scale to the table-cells

Answer 5

I would recommend you to first try making the table width 100% , It should work.
In case if it does not work then since you have 9 td's in a row try setting the td with to 11.11%. But if you have n number of td then it will not work.
Regards,
Vinit Patil.