تنظیم ارتفاع سطر در جدول بوت استرپ چگونه است ؟

اگر شما از بوت استرپ برای طراحی جدول خودتون استفاده نکردید که نباید مشکلی داشته باشید. خیلی راحت میتونید ارتفاع و عرض رو تغییر بدید. مثال زیر رو توجه کنید.

<style>
   tr {
       height : 50px;
   }
</style>

<table>
   <thead>
      <tr>
         <td>name</td>
         <td>family</td>
       </tr>
   </thead>
   <tbody>
         <tr>
              <td>Ali</td>
              <td>Hasani</td>
         </tr>
         <tr>
              <td>Matyam</td>
              <td>Razavi</td>
         </tr>
   </tbody>
</table>

همونطوری که میبینید به راحتی میشه ارتفاع سطرها رو تغییر داد.

تغییر ارتفاع سطرها در جدول بوت استرپ

اگر شما از بوت استرپ برای جدول خودتون استفاده می کنید کمی شرایط فرق داره چون کلاسهای بوت استرپ خودشون به صورت پیش فرض یه سری استایل ها رو به تگ table شما اضافه می کنن. به مثال زیر برای تغییر ارتفاع سطر و عرض ستون دقت کنید.

<style>
    .table > tbody > tr > td {
        padding:5px 20px 2px 2px;
    }
</style>

<div class="table-responsive">
   <table class="table table-bordered">
      <thead>
         <tr>
            <td style="width:40px;">name</td>
            <td>family</td>
          </tr>
       </thead>
       <tbody>
          <tr>
              <td>Ali</td>
              <td>rezaii</td>
          </tr>
          <tr>
              <td>kambiz</td>
              <td>puyan far</td>
          </tr>
        </tbody>
   </table>
</div>

خب همونطور که میبینید برای تغییر ارتفاع سطر از استایل بالا میشه توی بوت استرپ استفاده کرد.