Voy a construir una tabla basada en algunos datos de forma dinámica. Jquery agregará algunas columnas y filas más adelante, pero antes de escribir el código js, quiero ver la tabla como borrador para asegurarme de que todo esté bien. Así que puse algunas columnas y filas ficticias para comprobar cómo funciona todo. En este momento, veo que algunas columnas tienen el mismo ancho y otras son más pequeñas. Quiero que todas las columnas sean iguales.

Aquí está mi código html: se usa Bootstrap 4.3.1.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        </head>
    <body>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-responsive table-bordered" id="tblOfferPrepItems">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" style="color:#808080">Profil</th>
                            <th scope="col" style="color:#808080">Ürün/Hizmet</th>
                            <th scope="col" style="color:#808080">İşTipi</th>
                            <th scope="col" style="color:#808080">Açıklama</th>
                            <th scope="col" style="color:#808080">Yıl</th>
                            <th scope="col" style="color:#808080">Yıl 1 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 2 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 3 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 4 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 5 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 6 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 7 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Toplam Adam Gün</th>
                        </tr>
                    </thead>
                    <tbody id="tblOfferPrepItemsBody">
                        <tr>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductLookup" class="form-control" readonly>
                            </td>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductServiceLookup" class="form-control" readonly>
                            </td>
    
                            <td>
                                <input type="number" id="txtProductType" class="form-control" readonly>
                            </td>
                            <td>
                                <textarea class="form-control" id="txtDescription" rows="4"></textarea>
                            </td>
                            <td id="tdYearCode">
                                <input type="number" id="txtYearCode" class="form-control">
                            </td>
                            <td id="tdYearEffort1">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort2">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort3">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort4">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort5">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort6">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort7">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td>
                                <input type="number" id="txtTotalEffort" class="form-control">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer" style="margin-top: 5px;">
            <div class="row">
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCreate">
                        Oluştur
                    </button>
                </div>
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCancel" data-toggle="modal" data-target="#cancelModal">
                        İptal
                    </button>
                    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="cancelModalLabel">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Yapmış olduğunuz tüm seçimleri iptal edip sayfayı kapatmaya emin misiniz?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="btnCancelConfirm" class="btn btn-primary">Evet</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Hayır</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
0
Furkan Karacan 7 ago. 2020 a las 15:20

2 respuestas

La mejor respuesta

Puede ver que el ancho es el mínimo de los encabezados de la tabla. Algunas columnas son más pequeñas porque el encabezado de la tabla tiene solo unas pocas letras.

Como solución, puede establecer el ancho de th para que todos tengan el mismo ancho. Puede hacer esto ya sea relativo o con un ancho fijo

th, td{
width: 7.7% /* relative: 100%:13 columns= 7.6923076923 per column */
width: 50px /* fixed */
}

Solo hay clases de arranque para el ancho: 25%, 50%, 75% y 100%, por lo que debe configurar la regla en css. Su mesa también debe ser lo suficientemente ancha para que muestre el contenido correctamente.

1
klediooo 7 ago. 2020 a las 13:01
table{
    width: 100%;
    display: table !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
table tr td,table tr th{
    display: table-cell !important;
    vertical-align: middle !important;
    width:130px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        </head>
    <body>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-responsive table-bordered" id="tblOfferPrepItems">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" style="color:#808080">Profil</th>
                            <th scope="col" style="color:#808080">Ürün/Hizmet</th>
                            <th scope="col" style="color:#808080">İşTipi</th>
                            <th scope="col" style="color:#808080">Açıklama</th>
                            <th scope="col" style="color:#808080">Yıl</th>
                            <th scope="col" style="color:#808080">Yıl 1 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 2 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 3 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 4 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 5 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 6 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Yıl 7 Adam/Gün</th>
                            <th scope="col" style="color:#808080">Toplam Adam Gün</th>
                        </tr>
                    </thead>
                    <tbody id="tblOfferPrepItemsBody">
                        <tr>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductLookup" class="form-control" readonly>
                            </td>
                            <td>
                                <input type="text" data-id="" data-name="" id="txtProductServiceLookup" class="form-control" readonly>
                            </td>
    
                            <td>
                                <input type="number" id="txtProductType" class="form-control" readonly>
                            </td>
                            <td>
                                <textarea class="form-control" id="txtDescription" rows="4"></textarea>
                            </td>
                            <td id="tdYearCode">
                                <input type="number" id="txtYearCode" class="form-control">
                            </td>
                            <td id="tdYearEffort1">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort2">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort3">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort4">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort5">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort6">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td id="tdYearEffort7">
                                <input type="number" id="txtYearEffort" class="form-control">
                            </td>
                            <td>
                                <input type="number" id="txtTotalEffort" class="form-control">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer" style="margin-top: 5px;">
            <div class="row">
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCreate">
                        Oluştur
                    </button>
                </div>
                <div class="col" style="margin: auto; text-align: center;">
                    <button type="button" class="btn btn-secondary" id="btnCancel" data-toggle="modal" data-target="#cancelModal">
                        İptal
                    </button>
                    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="cancelModalLabel">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Yapmış olduğunuz tüm seçimleri iptal edip sayfayı kapatmaya emin misiniz?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="btnCancelConfirm" class="btn btn-primary">Evet</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Hayır</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

Utilice esto en su lugar ...

0
Rayees AC 7 ago. 2020 a las 13:31