2017-08-29 12 views
1

私はHTMLでテーブルを作成しました。テーブルの最後のカラムに複数のカラムがあります。 enter image description hereテーブルがカラムの幅を正しく反映していない

私はテーブルの最後の列を別の表の60列に分割しましたが、問題は33という列の後に列の幅を無視することです。私が何をしても、単に幅を無視しても、インラインスタイルで設定しようとしましたが、この問題を解決できませんでした。そして、最後の列[再び60の列に分割された]が幅を認識していない第2行でも問題が続きます。私は各列の幅を設定しようとしましたが、単に幅を無視します。だから問題は何ですか?

ところで、私はレスポンシブテーブルにBootstrapフレームワークを使用しています。

ここには同じ表のdemoがあります。いずれか1つこれで私を助けることができますか?

+0

誰もが何か提案をしてもいいですか? – YogY

答えて

1

CSSファイルにするか、ページの見出しにCSSを次のように追加します。これがあなたを助けることを願っています。

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

完全に動作します。ご協力ありがとうございました – YogY

0

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

関連する問題