[Solved] Bootstrap Table Cell height not working in CSS

AliYilmaz
 
on Jun 28, 2022 07:24 AM
273 Views

Hi,

I am using bootstrap table in my mvc project. I tried a lot but I can't give table td height. I want to lower its height. How could this be?

But when I give height in my table, it doesn't get smaller either. It has div and label and input in it, could it be because of that? Can you make an example by looking at my table structure?

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col"><i class=" fas fa-angle-down"></i></th>
            <th scope="col"><i class="fas fa-angle-right"></i> </th>
            <th><label>XS</label></th>
            <th><label>S</label></th>
            <th><label>M</label></th>
            <th><label>L</label></th>
            <th><label>XL</label></th>
            <th><label>XXL</label></th>
            <th scope="col"> <i class="fa fa-calculator" style="font-size:24px"></i></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td style="width:145px;">
                    <label>12912-WHITE/BLACK</label>
                </td>
                <td><img src="https://ltbimg.mncdn.com/colors/100.jpg" onerror="this.onerror=null;this.src='https://ltbimg.mncdn.com/colors/100.jpg'" width="32" height="32"></td>
                    <td style="height:50px;">
                        <div class="form-group">
                            <div class="quantity 201" name="12912">
                                <input min="0" onchange="ArticleCombination.Actions.check_quantity(8683225272159,12912,201)" class="quantity-number" id="8683225272159" style="background-color:" type="number" name="ArticleCombinations[0].quantity" value="0">
                                <input type="hidden" id="ArticleCombinations_0__Barcode" name="ArticleCombinations[0].Barcode" value="8683225272159">
                                <input type="hidden" id="8683225272159-T" name="ArticleCombinations[0].InventoryTotalQuantity" value="">
                                <input type="hidden" id="ArticleCombinations_0__Size" name="ArticleCombinations[0].Size" value="XS">
                                <input type="hidden" id="ArticleCombinations_0__Length_Color" name="ArticleCombinations[0].Length_Color" value="12912-WHITE/BLACK">
                                <input type="hidden" data-val="true" data-val-required="The Articel_Oid field is required." id="ArticleCombinations_0__Articel_Oid" name="ArticleCombinations[0].Articel_Oid" value="77c7aee3-89a0-4339-9257-13c26db2ea4e">
                                <input type="hidden" id="ArticleCombinations_0__Length_DisplayNo" name="ArticleCombinations[0].Length_DisplayNo" value="12912"> 
                                <input type="hidden" data-val="true" data-val-required="The Availability field is required." id="ArticleCombinations_0__Availability" name="ArticleCombinations[0].Availability" value="1">
                                <input type="hidden" id="ArticleCombinations_0__CSDVEE_Oid" name="ArticleCombinations[0].CSDVEE_Oid" value="3f4c28b6-831c-404e-b0a2-a7f329a6c2b3">
                                <input type="hidden" id="ArticleCombinations_0__Length_Oid" name="ArticleCombinations[0].Length_Oid" value="6b749e27-833b-4005-83f0-5b56a56d8cd7">
                                <input type="hidden" id="ArticleCombinations_0__Size_Oid" name="ArticleCombinations[0].Size_Oid" value="00000000-0000-0000-0008-000000000036">
                                <input type="hidden" id="ArticleCombinations_0__Size_DisplayNo" name="ArticleCombinations[0].Size_DisplayNo" value="201"> 
                                <input type="hidden" data-val="true" data-val-number="The field UnitPrice must be a number." id="ArticleCombinations_0__UnitPrice" name="ArticleCombinations[0].UnitPrice" value="1.0000">
                            </div>
                        </div>
                    </td>
                    <td style="height:50px;">
                        <div class="form-group">
                            <div class="quantity 202" name="12912">
                                <input min="0" onchange="ArticleCombination.Actions.check_quantity(8683225272166,12912,202)" class="quantity-number" id="8683225272166" style="background-color:" type="number" name="ArticleCombinations[1].quantity" value="0">
                                <input type="hidden" id="ArticleCombinations_1__Barcode" name="ArticleCombinations[1].Barcode" value="8683225272166">
                                <input type="hidden" id="8683225272166-T" name="ArticleCombinations[1].InventoryTotalQuantity" value="">
                                <input type="hidden" id="ArticleCombinations_1__Size" name="ArticleCombinations[1].Size" value="S">
                                <input type="hidden" id="ArticleCombinations_1__Length_Color" name="ArticleCombinations[1].Length_Color" value="12912-WHITE/BLACK">
                                <input type="hidden" data-val="true" data-val-required="The Articel_Oid field is required." id="ArticleCombinations_1__Articel_Oid" name="ArticleCombinations[1].Articel_Oid" value="77c7aee3-89a0-4339-9257-13c26db2ea4e">
                                <input type="hidden" id="ArticleCombinations_1__Length_DisplayNo" name="ArticleCombinations[1].Length_DisplayNo" value="12912"> 
                                <input type="hidden" data-val="true" data-val-required="The Availability field is required." id="ArticleCombinations_1__Availability" name="ArticleCombinations[1].Availability" value="1">
                                <input type="hidden" id="ArticleCombinations_1__CSDVEE_Oid" name="ArticleCombinations[1].CSDVEE_Oid" value="558af7e4-5b69-4b55-829e-ff0a87e84eab">
                                <input type="hidden" id="ArticleCombinations_1__Length_Oid" name="ArticleCombinations[1].Length_Oid" value="6b749e27-833b-4005-83f0-5b56a56d8cd7">
                                <input type="hidden" id="ArticleCombinations_1__Size_Oid" name="ArticleCombinations[1].Size_Oid" value="00000000-0000-0000-0008-000000000031">
                                <input type="hidden" id="ArticleCombinations_1__Size_DisplayNo" name="ArticleCombinations[1].Size_DisplayNo" value="202"> 
                                <input type="hidden" data-val="true" data-val-number="The field UnitPrice must be a number." id="ArticleCombinations_1__UnitPrice" name="ArticleCombinations[1].UnitPrice" value="1.0000">
                            </div>
                        </div>
                    </td>
                    <td style="height:50px;">
                        <div class="form-group">
                            <div class="quantity 203" name="12912">
                                <input min="0" onchange="ArticleCombination.Actions.check_quantity(8683225272173,12912,203)" class="quantity-number" id="8683225272173" style="background-color:" type="number" name="ArticleCombinations[2].quantity" value="0">
                                <input type="hidden" id="ArticleCombinations_2__Barcode" name="ArticleCombinations[2].Barcode" value="8683225272173">
                                <input type="hidden" id="8683225272173-T" name="ArticleCombinations[2].InventoryTotalQuantity" value="">
                                <input type="hidden" id="ArticleCombinations_2__Size" name="ArticleCombinations[2].Size" value="M">
                                <input type="hidden" id="ArticleCombinations_2__Length_Color" name="ArticleCombinations[2].Length_Color" value="12912-WHITE/BLACK">
                                <input type="hidden" data-val="true" data-val-required="The Articel_Oid field is required." id="ArticleCombinations_2__Articel_Oid" name="ArticleCombinations[2].Articel_Oid" value="77c7aee3-89a0-4339-9257-13c26db2ea4e">
                                <input type="hidden" id="ArticleCombinations_2__Length_DisplayNo" name="ArticleCombinations[2].Length_DisplayNo" value="12912"> 
                                <input type="hidden" data-val="true" data-val-required="The Availability field is required." id="ArticleCombinations_2__Availability" name="ArticleCombinations[2].Availability" value="1">
                                <input type="hidden" id="ArticleCombinations_2__CSDVEE_Oid" name="ArticleCombinations[2].CSDVEE_Oid" value="6797f233-39de-4781-b47b-2feeb3abf0de">
                                <input type="hidden" id="ArticleCombinations_2__Length_Oid" name="ArticleCombinations[2].Length_Oid" value="6b749e27-833b-4005-83f0-5b56a56d8cd7">
                                <input type="hidden" id="ArticleCombinations_2__Size_Oid" name="ArticleCombinations[2].Size_Oid" value="00000000-0000-0000-0008-000000000029">
                                <input type="hidden" id="ArticleCombinations_2__Size_DisplayNo" name="ArticleCombinations[2].Size_DisplayNo" value="203"> 
                                <input type="hidden" data-val="true" data-val-number="The field UnitPrice must be a number." id="ArticleCombinations_2__UnitPrice" name="ArticleCombinations[2].UnitPrice" value="1.0000">
                            </div>
                        </div>
                    </td>
                    <td style="height:50px;">
                        <div class="form-group">
                            <div class="quantity 204" name="12912">
                                <input min="0" onchange="ArticleCombination.Actions.check_quantity(8683225272180,12912,204)" class="quantity-number" id="8683225272180" style="background-color:" type="number" name="ArticleCombinations[3].quantity" value="0">
                                <input type="hidden" id="ArticleCombinations_3__Barcode" name="ArticleCombinations[3].Barcode" value="8683225272180">
                                <input type="hidden" id="8683225272180-T" name="ArticleCombinations[3].InventoryTotalQuantity" value="">
                                <input type="hidden" id="ArticleCombinations_3__Size" name="ArticleCombinations[3].Size" value="L">
                                <input type="hidden" id="ArticleCombinations_3__Length_Color" name="ArticleCombinations[3].Length_Color" value="12912-WHITE/BLACK">
                                <input type="hidden" data-val="true" data-val-required="The Articel_Oid field is required." id="ArticleCombinations_3__Articel_Oid" name="ArticleCombinations[3].Articel_Oid" value="77c7aee3-89a0-4339-9257-13c26db2ea4e">
                                <input type="hidden" id="ArticleCombinations_3__Length_DisplayNo" name="ArticleCombinations[3].Length_DisplayNo" value="12912"> 
                                <input type="hidden" data-val="true" data-val-required="The Availability field is required." id="ArticleCombinations_3__Availability" name="ArticleCombinations[3].Availability" value="1">
                                <input type="hidden" id="ArticleCombinations_3__CSDVEE_Oid" name="ArticleCombinations[3].CSDVEE_Oid" value="13773039-485d-4a79-b9fa-27e23edd9a4a">
                                <input type="hidden" id="ArticleCombinations_3__Length_Oid" name="ArticleCombinations[3].Length_Oid" value="6b749e27-833b-4005-83f0-5b56a56d8cd7">
                                <input type="hidden" id="ArticleCombinations_3__Size_Oid" name="ArticleCombinations[3].Size_Oid" value="00000000-0000-0000-0008-000000000027">
                                <input type="hidden" id="ArticleCombinations_3__Size_DisplayNo" name="ArticleCombinations[3].Size_DisplayNo" value="204"> 
                                <input type="hidden" data-val="true" data-val-number="The field UnitPrice must be a number." id="ArticleCombinations_3__UnitPrice" name="ArticleCombinations[3].UnitPrice" value="1.0000">
                            </div>
                        </div>
                    </td>
                    <td style="height:50px;">
                        <div class="form-group">
                            <div class="quantity 205" name="12912">
                                <input min="0" onchange="ArticleCombination.Actions.check_quantity(8683225272197,12912,205)" class="quantity-number" id="8683225272197" style="background-color:" type="number" name="ArticleCombinations[4].quantity" value="0">
                                <input type="hidden" id="ArticleCombinations_4__Barcode" name="ArticleCombinations[4].Barcode" value="8683225272197">
                                <input type="hidden" id="8683225272197-T" name="ArticleCombinations[4].InventoryTotalQuantity" value="">
                                <input type="hidden" id="ArticleCombinations_4__Size" name="ArticleCombinations[4].Size" value="XL">
                                <input type="hidden" id="ArticleCombinations_4__Length_Color" name="ArticleCombinations[4].Length_Color" value="12912-WHITE/BLACK">
                                <input type="hidden" data-val="true" data-val-required="The Articel_Oid field is required." id="ArticleCombinations_4__Articel_Oid" name="ArticleCombinations[4].Articel_Oid" value="77c7aee3-89a0-4339-9257-13c26db2ea4e">
                                <input type="hidden" id="ArticleCombinations_4__Length_DisplayNo" name="ArticleCombinations[4].Length_DisplayNo" value="12912"> 
                                <input type="hidden" data-val="true" data-val-required="The Availability field is required." id="ArticleCombinations_4__Availability" name="ArticleCombinations[4].Availability" value="1">
                                <input type="hidden" id="ArticleCombinations_4__CSDVEE_Oid" name="ArticleCombinations[4].CSDVEE_Oid" value="d0b160e9-1ce3-4ad8-8250-c8d5146de725">
                                <input type="hidden" id="ArticleCombinations_4__Length_Oid" name="ArticleCombinations[4].Length_Oid" value="6b749e27-833b-4005-83f0-5b56a56d8cd7">
                                <input type="hidden" id="ArticleCombinations_4__Size_Oid" name="ArticleCombinations[4].Size_Oid" value="00000000-0000-0000-0008-000000000034">
                                <input type="hidden" id="ArticleCombinations_4__Size_DisplayNo" name="ArticleCombinations[4].Size_DisplayNo" value="205"> 
                                <input type="hidden" data-val="true" data-val-number="The field UnitPrice must be a number." id="ArticleCombinations_4__UnitPrice" name="ArticleCombinations[4].UnitPrice" value="1.0000">
                            </div>
                        </div>
                    </td>
                    <td style="height:50px;">
                        <div class="form-group">
                            <div class="quantity 206" name="12912">
                                <input min="0" onchange="ArticleCombination.Actions.check_quantity(8683225272203,12912,206)" class="quantity-number" id="8683225272203" style="background-color:" type="number" name="ArticleCombinations[5].quantity" value="0">
                                <input type="hidden" id="ArticleCombinations_5__Barcode" name="ArticleCombinations[5].Barcode" value="8683225272203">
                                <input type="hidden" id="8683225272203-T" name="ArticleCombinations[5].InventoryTotalQuantity" value="">
                                <input type="hidden" id="ArticleCombinations_5__Size" name="ArticleCombinations[5].Size" value="XXL">
                                <input type="hidden" id="ArticleCombinations_5__Length_Color" name="ArticleCombinations[5].Length_Color" value="12912-WHITE/BLACK">
                                <input type="hidden" data-val="true" data-val-required="The Articel_Oid field is required." id="ArticleCombinations_5__Articel_Oid" name="ArticleCombinations[5].Articel_Oid" value="77c7aee3-89a0-4339-9257-13c26db2ea4e">
                                <input type="hidden" id="ArticleCombinations_5__Length_DisplayNo" name="ArticleCombinations[5].Length_DisplayNo" value="12912"> 
                                <input type="hidden" data-val="true" data-val-required="The Availability field is required." id="ArticleCombinations_5__Availability" name="ArticleCombinations[5].Availability" value="1">
                                <input type="hidden" id="ArticleCombinations_5__CSDVEE_Oid" name="ArticleCombinations[5].CSDVEE_Oid" value="932115bb-e551-4b6f-8de6-c98b4d899223">
                                <input type="hidden" id="ArticleCombinations_5__Length_Oid" name="ArticleCombinations[5].Length_Oid" value="6b749e27-833b-4005-83f0-5b56a56d8cd7">
                                <input type="hidden" id="ArticleCombinations_5__Size_Oid" name="ArticleCombinations[5].Size_Oid" value="00000000-0000-0000-0008-000000000038">
                                <input type="hidden" id="ArticleCombinations_5__Size_DisplayNo" name="ArticleCombinations[5].Size_DisplayNo" value="206"> 
                                <input type="hidden" data-val="true" data-val-number="The field UnitPrice must be a number." id="ArticleCombinations_5__UnitPrice" name="ArticleCombinations[5].UnitPrice" value="1.0000">
                            </div>
                        </div>
                    </td>
                <td>
                    <input type="text" name="LC" id="12912-L" class="len 12912" value=" 0" readonly="">
                </td>
            </tr>
    </tbody>
    <tbody>
        <tr>
            <td><i class="fa fa-calculator" style="font-size:24px"></i>  </td>
            <td></td>
                <td>
                    <input type="hidden" id="item_Size_DisplayNo" name="item.Size_DisplayNo" value="201">
                    <input type="text" id="201-S" name="siz 201" value=" 0" readonly="">
                </td>
                <td>
                    <input type="hidden" id="item_Size_DisplayNo" name="item.Size_DisplayNo" value="202">
                    <input type="text" id="202-S" name="siz 202" value=" 0" readonly="">
                </td>
                <td>
                    <input type="hidden" id="item_Size_DisplayNo" name="item.Size_DisplayNo" value="203">
                    <input type="text" id="203-S" name="siz 203" value=" 0" readonly="">
                </td>
                <td>
                    <input type="hidden" id="item_Size_DisplayNo" name="item.Size_DisplayNo" value="204">
                    <input type="text" id="204-S" name="siz 204" value=" 0" readonly="">
                </td>
                <td>
                    <input type="hidden" id="item_Size_DisplayNo" name="item.Size_DisplayNo" value="205">
                    <input type="text" id="205-S" name="siz 205" value=" 0" readonly="">
                </td>
                <td>
                    <input type="hidden" id="item_Size_DisplayNo" name="item.Size_DisplayNo" value="206">
                    <input type="text" id="206-S" name="siz 206" value=" 0" readonly="">
                </td>
            <td> <input type="text" id="Total" value="0" readonly=""></td>
        </tr>
    </tbody>
</table>

For example, you cannot make it lower than 50 px. That's how it is in your code. I want to shrink it from 50 px.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 29, 2022 05:25 AM
AliYilmaz says:
<label>12912-WHITE/BLACK</label>

Height is not set to lower due to the label text and the image width and height property.

As per the width and height of the image and the label text having the width of 145 the cell height is set to maintain it.

So when the content inside the cell is increased the height will be adjusted.