Bootstrap 4 - как правильно обрабатывать строки - PullRequest
Новая
       15

Bootstrap 4 - как правильно обрабатывать строки

0 голосов
/ 21 марта 2019

У меня есть таблица начальной загрузки 4, которая ведет себя не так, как я ожидаю

Или, может быть, я неверно истолковал значение тегов начальной загрузки 4 таблицы

Можете ли вы намекнуть, что не так?

здесь это скрипка https://jsfiddle.net/1uokLh67/11/

например, как вы можете видеть, они Pay To и Customer ячейки не охватывают 50% каждая, но естьэто пустое место в конце, и вы увидите поведение других

Спасибо 

  <div class="container">
    <table class="table table-bordered">
    	 <caption>A complex table</caption>
       
       
    		 <thead>
    				<tr>
    					<th class="col-4">Invoice #123456789</th>
    					<th class="col-2">Date:</th>
    					<th class="col-6">14 January 2025</th>
    				</tr>
    			  <tr>
    			   <td class="col-6">
    			    <strong>Pay to:</strong><br>
    			    Acme Billing Co.<br>
    			    123 Main St.<br>
    			    Cityville, NA 12345
    			   </td>
    			   <td class="col-6">
    			    <strong>Customer:</strong><br>
    			    John Smith<br>
    			    321 Willow Way<br>
    			    Southeast Northwestershire, MA 54321
    			   </td>
    			  </tr>
    		 </thead>
         
         
    		 <tbody>
    			  <tr>
              <th class="col-3">Qty.</th>			  	
              <th class="col-3">Name / Description</th>
              <th class="col-3">Price</th>
              <th class="col-3">Cost</th>
    			  </tr>
    			  <tr>
                <td class="col-3">1000</td>
                <td class="col-3">Paperclips</td>			   
                <td class="col-3">0.01</td>
                <td class="col-3">10.00</td>
    			  </tr>
    			  <tr>
    			   <td class="col-3">100</td>			  	
    			   <td class="col-3">Staples (box)</td>
    			   <td class="col-3">1.00</td>
    			   <td class="col-3">100.00</td>
    			  </tr>
    		 </tbody>
    		 <tfoot>   
    			  <tr>
              <td  class="col-3"></td>
              <td class="col-3"></td>
              <th class="col-3">Subtotal</th>
              <td class="col-3"> 110.00</td>
    			  </tr>
    			  <tr>
              <td class="col-3"></td>
              <th class="col-3">Tax</th>
              <td class="col-3"> 8% </td>
              <td class="col-3">8.80</td>
    			  </tr>
    			  <tr>
              <td class="col-3"></td>
              <td class="col-3"></td>
              <th class="col-3">Grand Total</th>
              <td class="col-3">$ 118.80</td>
    			  </tr>
    		 </tfoot>
         
    		</table>
        </div>

1 Ответ

0 голосов
/ 21 марта 2019

используйте colspan для решения вашей проблемы ... 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table table-bordered">
	 <caption>A complex table</caption>
   
   
		 <thead>
				<tr>
					<th class="col-4">Invoice #123456789</th>
					<th class="col-2">Date:</th>
					<th class="col-6" colspan="2">14 January 2025</th>
				</tr>
			  <tr>
			   <td class="col-6" colspan="1">
			    <strong>Pay to:</strong><br>
			    Acme Billing Co.<br>
			    123 Main St.<br>
			    Cityville, NA 12345
			   </td>
			   <td class="col-6" colspan="3">
			    <strong>Customer:</strong><br>
			    John Smith<br>
			    321 Willow Way<br>
			    Southeast Northwestershire, MA 54321
			   </td>
			  </tr>
		 </thead>
     
     
		 <tbody>
			  <tr>
          <th class="col-3">Qty.</th>			  	
          <th class="col-3">Name / Description</th>
          <th class="col-3">Price</th>
          <th class="col-3">Cost</th>
			  </tr>
			  <tr>
            <td class="col-3">1000</td>
            <td class="col-3">Paperclips</td>			   
            <td class="col-3">0.01</td>
            <td class="col-3">10.00</td>
			  </tr>
			  <tr>
			   <td class="col-3">100</td>			  	
			   <td class="col-3">Staples (box)</td>
			   <td class="col-3">1.00</td>
			   <td class="col-3">100.00</td>
			  </tr>
		 </tbody>
		 <tfoot>   
			  <tr>
          <td  class="col-3"></td>
          <td class="col-3"></td>
          <th class="col-3">Subtotal</th>
          <td class="col-3"> 110.00</td>
			  </tr>
			  <tr>
          <td class="col-3"></td>
          <th class="col-3">Tax</th>
          <td class="col-3"> 8% </td>
          <td class="col-3">8.80</td>
			  </tr>
			  <tr>
          <td class="col-3"></td>
          <td class="col-3"></td>
          <th class="col-3">Grand Total</th>
          <td class="col-3">$ 118.80</td>
			  </tr>
		 </tfoot>
     
		</table>
    </div>
...