CODEWITHSUNDEEP
javascripthtmlcsshtml-tableinvoice
Durgesh Dangi
Durgesh Dangi

Reputation: 213

Want to create invoice where column (td) will delete or add dynamically using same width

I want to create a invoice where (column) can be add or delete dynamically.

in first invoice i have 5 column(td) and second invoce i have 8 column () so both situation i need to use 100% width due to A4 paper size because i want to print this invoice.

So as you known , table td can be increase or decrease so i want to adjust this extra increased/decreased width in one column and other column width will be fixed.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
} 

th,td {
  border: 1px solid black;
}

table.d {
  table-layout: fixed;
  width: 100%;  
}
</style>
</head>
<body>


<table class="d">
  <tr>
    <th>Name</th>
    <th>Item details</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total Amount</th>
    <th>Tax</th>
  </tr>
  <tr>
    <td>Bulb </td>
    <td>Lorem ipsum dollar</td>
    <td>1</td>
    <td>21</td>
    <td>23</td>
    <td>2</td>
  </tr>

</table>

</body>
</html>

Please check this screenshot also:- tried to explain by image

Upvotes: 0

Views: 191

Answers (1)

Cray
Cray

Reputation: 2850

You can set a fixed width for your columns and exclude the one that needs to fill the extra space using :not(.className) selector. 

table {
  border-collapse: collapse;
  border: 1px solid black;
} 

th,td {
  border: 1px solid black;
}

table.d {
  table-layout: fixed;
  width: 100%;  
}

th:not(.fill-width),
td:not(.fill-width) {
  width:70px;
  overflow:hidden;
}
<table class="d">
  <tr>
    <th>Name</th>
    <th class="fill-width">Item details</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total Amount</th>
    <th>Tax</th>
  </tr>
  <tr>
    <td>Bulb </td>
    <td class="fill-width">Lorem ipsum dollar</td>
    <td>1</td>
    <td>21</td>
    <td>23</td>
    <td>2</td>
  </tr>
</table>

Upvotes: 1

Related Questions