选择宽度选择问题

时间:2018-03-16 08:58:17

标签: html css twitter-bootstrap twitter-bootstrap-3 jquery-chosen

我在引导站点和表格中使用所选的选择插件。我的问题是,正如你在图片上看到的那样,每行的宽度会更大。enter image description here

引导程序和选择的css是基础。

页面源中生成的html:

<table class="table table-hover table-bordered list"><thead style="font-weight:bold;">
                                  <tr class="tr_bold">
                                    <td style="text-align: center;">ID</td>
                                    <td class="left">Megnevezés</td>
                                    <td style="text-align: center;">Egység</td>
                                    <td>Bruttó ár</td>
                                    <td>Akciós ár</td>
                                    <td style="text-align: center;">Akciós</td>
                                  </tr>
                                </thead><tbody>                             <tr id="sor52">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="52" />
                                    <td style="text-align: center;">52</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[52]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[52]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[52]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                                                            <tr id="sor117">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="117" />
                                    <td style="text-align: center;">117</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[117]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[117]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[117]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                                                            <tr id="sor50">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="50" />
                                    <td style="text-align: center;">50</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[50]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[50]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[50]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                            </tbody></table>

编辑:

如果我从select中删除表单控件类,它将是这样的: enter image description here

2 个答案:

答案 0 :(得分:0)

最佳解决方案

  • 从上一个td删除style =“text-align:center”。因为,里面 那个td,任何元素都可以是中心。 还可以从下面的代码段中将css添加到样式表中。

.input-select{
  width:100% !Important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover table-bordered list"><thead style="font-weight:bold;">
                                  <tr class="tr_bold">
                                    <td style="text-align: center;">ID</td>
                                    <td class="left">Megnevezés</td>
                                    <td style="text-align: center;">Egység</td>
                                    <td>Bruttó ár</td>
                                    <td>Akciós ár</td>
                                    <td style="text-align: center;">Akciós</td>
                                  </tr>
                                </thead><tbody>                             <tr id="sor52">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="52" />
                                    <td style="text-align: center;">52</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[52]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[52]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[52]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                                                            <tr id="sor117">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="117" />
                                    <td style="text-align: center;">117</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[117]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[117]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[117]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                                                            <tr id="sor50">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="50" />
                                    <td style="text-align: center;">50</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[50]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[50]" value="500" class="form-control" /></td>
                                    <td >
                                        <select name="termek_akcio[50]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                            </tbody></table>

答案 1 :(得分:0)

&#13;
&#13;
select {
  width: inherit !important;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover table-bordered list"><thead style="font-weight:bold;">
                                  <tr class="tr_bold">
                                    <td style="text-align: center;">ID</td>
                                    <td class="left">Megnevezés</td>
                                    <td style="text-align: center;">Egység</td>
                                    <td>Bruttó ár</td>
                                    <td>Akciós ár</td>
                                    <td style="text-align: center;">Akciós</td>
                                  </tr>
                                </thead><tbody>                             <tr id="sor52">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="52" />
                                    <td style="text-align: center;">52</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[52]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[52]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[52]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                                                            <tr id="sor117">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="117" />
                                    <td style="text-align: center;">117</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[117]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[117]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[117]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                                                            <tr id="sor50">
                                    <input type="hidden" name="sav_id[]" class="sav_input" value="50" />
                                    <td style="text-align: center;">50</td>
                                    <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td>
                                    <td style="text-align: center;">m2</td>
                                    <td><input type="text" name="a[50]" value="1000" class="form-control" /></td>
                                    <td><input type="text" name="b[50]" value="500" class="form-control" /></td>
                                    <td style="text-align: center;">
                                        <select name="termek_akcio[50]" class="input input-select form-control">
                                            <option  selected="selected" value="1">Igen</option><option  value="0">Nem</option>                                     </select>
                                    </td>
                                  </tr>
                            </tbody></table>
&#13;
&#13;
&#13;