table not respecting column width properly

Question

I've created a table in HTML, inside that table I've multiple columns in the last column of the table like below image.

I've divided the last column of the table into 60 columns of another table, but the problem is that after column with number 33 it ignores the width of the column. No matter what I do it simply ignores the width, even I tried to set it with inline-style but unable to solve this issue. And the problem continues in the second row also, in which the last column[again divided into 60 columns] is not recognizing the width. I tried setting the width of each column but it simply ignores the width. So what is the problem??

By the way, I'm using Bootstrap framework for the responsive table.

Here's the demo of the same table. Can any one help me with this??

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <table class="table table-bordered table-striped">
	        <thead>
	        <tr>
	          <th class="text-center">S.No.</th>
	          <th class="text-center">center name</th>
	          <th class="text-center">batch size</th>
	          <th class="text-center">status</th>
	          <th class="text-center">
	            <table class="table table-bordered table-striped" style="margin-bottom: 0">
	              <thead>
	                <tr>
	                  <th style="width: 3%;">1</th>
	                  <th style="width: 3%;">2</th>
	                  <th style="width: 3%;">3</th>
	                  <th style="width: 3%;">4</th>
	                  <th style="width: 3%;">5</th>
	                  <th style="width: 3%;">6</th>
	                  <th style="width: 3%;">7</th>
	                  <th style="width: 3%;">8</th>
	                  <th style="width: 3%;">9</th>
	                  <th style="width: 3%;">10</th>
	                  <th style="width: 3%;">11</th>
	                  <th style="width: 3%;">12</th>
	                  <th style="width: 3%;">13</th>
	                  <th style="width: 3%;">14</th>
	                  <th style="width: 3%;">15</th>
	                  <th style="width: 3%;">16</th>
	                  <th style="width: 3%;">17</th>
	                  <th style="width: 3%;">18</th>
	                  <th style="width: 3%;">19</th>
	                  <th style="width: 3%;">20</th>
	                  <th style="width: 3%;">21</th>
	                  <th style="width: 3%;">22</th>
	                  <th style="width: 3%;">23</th>
	                  <th style="width: 3%;">24</th>
	                  <th style="width: 3%;">25</th>
	                  <th style="width: 3%;">26</th>
	                  <th style="width: 3%;">27</th>
	                  <th style="width: 3%;">28</th>
	                  <th style="width: 3%;">29</th>
	                  <th style="width: 3%;">30</th>
	                  <th style="width: 3%;">31</th>
	                  <th style="width: 3%;">32</th>
	                  <th style="width: 3%;">33</th>
	                  <th style="width: 3%;">34</th>
	                  <th style="width: 3%;">35</th>
	                  <th style="width: 3%;">36</th>
	                  <th style="width: 3%;">37</th>
	                  <th style="width: 3%;">38</th>
	                  <th style="width: 3%;">39</th>
	                  <th style="width: 3%;">40</th>
	                  <th style="width: 3%;">41</th>
	                  <th style="width: 3%;">42</th>
	                  <th style="width: 3%;">43</th>
	                  <th style="width: 3%;">44</th>
	                  <th style="width: 3%;">45</th>
	                  <th style="width: 3%;">46</th>
	                  <th style="width: 3%;">47</th>
	                  <th style="width: 3%;">48</th>
	                  <th style="width: 3%;">49</th>
	                  <th style="width: 3%;">50</th>
	                  <th style="width: 3%;">51</th>
	                  <th style="width: 3%;">52</th>
	                  <th style="width: 3%;">53</th>
	                  <th style="width: 3%;">54</th>
	                  <th style="width: 3%;">55</th>
	                  <th style="width: 3%;">56</th>
	                  <th style="width: 3%;">57</th>
	                  <th style="width: 3%;">58</th>
	                  <th style="width: 3%;">59</th>
	                  <th style="width: 3%;">60</th>
	                </tr>
	              </thead>
	            </table>
	          </th>
	        </tr>
	        </thead>
	        <tbody>
	          <tr>
	            <td>Lipsum Website</td>
	            <td><a href="http://www.lipsum.com">www.lipsum.com</a></td>
	            <td>100</td>
	            <td>done</td>
	            <td>
	              <table class="table table-bordered table-striped" style="margin-bottom: 0">
	                <thead>
	                <tr>
	                  <th style="width: 3%;">101</th>
	                  <th style="width: 3%;">102</th>
	                  <th style="width: 3%;">103</th>
	                  <th style="width: 3%;">104</th>
	                  <th style="width: 3%;">105</th>
	                  <th style="width: 3%;">106</th>
	                  <th style="width: 3%;">107</th>
	                  <th style="width: 3%;">108</th>
	                  <th style="width: 3%;">109</th>
	                  <th style="width: 3%;">110</th>
	                  <th style="width: 3%;">111</th>
	                  <th style="width: 3%;">112</th>
	                  <th style="width: 3%;">113</th>
	                  <th style="width: 3%;">114</th>
	                  <th style="width: 3%;">115</th>
	                  <th style="width: 3%;">116</th>
	                  <th style="width: 3%;">117</th>
	                  <th style="width: 3%;">118</th>
	                  <th style="width: 3%;">119</th>
	                  <th style="width: 3%;">120</th>
	                  <th style="width: 3%;">121</th>
	                  <th style="width: 3%;">122</th>
	                  <th style="width: 3%;">123</th>
	                  <th style="width: 3%;">124</th>
	                  <th style="width: 3%;">125</th>
	                  <th style="width: 3%;">126</th>
	                  <th style="width: 3%;">127</th>
	                  <th style="width: 3%;">128</th>
	                  <th style="width: 3%;">129</th>
	                  <th style="width: 3%;">130</th>
	                  <th style="width: 3%;">131</th>
	                  <th style="width: 3%;">132</th>
	                  <th style="width: 3%;">133</th>
	                  <th style="width: 3%;">134</th>
	                  <th style="width: 3%;">135</th>
	                  <th style="width: 3%;">136</th>
	                  <th style="width: 3%;">137</th>
	                  <th style="width: 3%;">138</th>
	                  <th style="width: 3%;">139</th>
	                  <th style="width: 3%;">140</th>
	                  <th style="width: 3%;">141</th>
	                  <th style="width: 3%;">142</th>
	                  <th style="width: 3%;">143</th>
	                  <th style="width: 3%;">144</th>
	                  <th style="width: 3%;">145</th>
	                  <th style="width: 3%;">146</th>
	                  <th style="width: 3%;">147</th>
	                  <th style="width: 3%;">148</th>
	                  <th style="width: 3%;">149</th>
	                  <th style="width: 3%;">150</th>
	                  <th style="width: 3%;">151</th>
	                  <th style="width: 3%;">152</th>
	                  <th style="width: 3%;">153</th>
	                  <th style="width: 3%;">154</th>
	                  <th style="width: 3%;">155</th>
	                  <th style="width: 3%;">156</th>
	                  <th style="width: 3%;">157</th>
	                  <th style="width: 3%;">158</th>
	                  <th style="width: 3%;">159</th>
	                  <th style="width: 3%;">160</th>
	                </tr>
	                </thead>
	              </table>
	            </td>
	          </tr>
	        </tbody>
	      </table>

Answer 2

Add following CSS to your css file or in heading of your page. Hope this will help you.

table .incrementValue {
  min-width: 47px;
}