Sourceਟੇਬਲ
ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ (ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨਾਂ ਵਿੱਚ ਉਹਨਾਂ ਦੀ ਪ੍ਰਚਲਿਤ ਵਰਤੋਂ ਦੇ ਮੱਦੇਨਜ਼ਰ) ਟੇਬਲਾਂ ਦੀ ਔਪਟ-ਇਨ ਸਟਾਈਲਿੰਗ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।
ਕੈਲੰਡਰ ਅਤੇ ਮਿਤੀ ਚੋਣਕਾਰ ਵਰਗੇ ਥਰਡ-ਪਾਰਟੀ ਵਿਜੇਟਸ ਵਿੱਚ ਟੇਬਲਾਂ ਦੀ ਵਿਆਪਕ ਵਰਤੋਂ ਦੇ ਕਾਰਨ, ਅਸੀਂ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨੂੰ ਆਪਟ-ਇਨ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਹੈ । ਬਸ .table
ਕਿਸੇ ਵੀ ਵਿੱਚ ਬੇਸ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ <table>
, ਫਿਰ ਕਸਟਮ ਸਟਾਈਲ ਜਾਂ ਸਾਡੀਆਂ ਵੱਖ-ਵੱਖ ਸ਼ਾਮਲ ਸੋਧਕ ਕਲਾਸਾਂ ਨਾਲ ਵਿਸਤਾਰ ਕਰੋ।
ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਟੇਬਲ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਇੱਥੇ ਦੱਸਿਆ .table
ਗਿਆ ਹੈ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਆਧਾਰਿਤ ਟੇਬਲ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। ਸਾਰੀਆਂ ਟੇਬਲ ਸ਼ੈਲੀਆਂ ਨੂੰ ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ , ਮਤਲਬ ਕਿ ਕੋਈ ਵੀ ਨੇਸਟਡ ਟੇਬਲ ਪੇਰੈਂਟ ਵਾਂਗ ਹੀ ਸਟਾਈਲ ਕੀਤਾ ਜਾਵੇਗਾ।
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
ਤੁਸੀਂ ਰੰਗਾਂ ਨੂੰ ਉਲਟਾ ਵੀ ਸਕਦੇ ਹੋ—ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡ 'ਤੇ ਹਲਕੇ ਟੈਕਸਟ ਦੇ ਨਾਲ-ਨਾਲ .table-dark
।
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-dark" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
ਟੇਬਲ ਅਤੇ ਡਾਰਕ ਟੇਬਲ ਦੇ ਸਮਾਨ, ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ .thead-light
ਜਾਂ s ਨੂੰ ਹਲਕਾ ਜਾਂ ਗੂੜ੍ਹਾ ਸਲੇਟੀ ਦਿਖਾਈ .thead-dark
ਦੇਣ ਲਈ ।<thead>
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table" >
<thead class= "thead-dark" >
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
<table class= "table" >
<thead class= "thead-light" >
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
.table-striped
ਦੇ ਅੰਦਰ ਕਿਸੇ ਵੀ ਟੇਬਲ ਕਤਾਰ ਵਿੱਚ ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਜੋੜਨ ਲਈ ਵਰਤੋਂ <tbody>
।
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-striped" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-striped table-dark" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
.table-bordered
ਟੇਬਲ ਅਤੇ ਸੈੱਲਾਂ ਦੇ ਸਾਰੇ ਪਾਸਿਆਂ 'ਤੇ ਬਾਰਡਰਾਂ ਲਈ ਜੋੜੋ ।
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ ਦ ਬਰਡ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-bordered" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ ਦ ਬਰਡ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-bordered table-dark" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
.table-hover
ਇੱਕ ਦੇ ਅੰਦਰ ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ 'ਤੇ ਇੱਕ ਹੋਵਰ ਸਥਿਤੀ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ <tbody>
।
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ ਦ ਬਰਡ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-hover" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ ਦ ਬਰਡ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-hover table-dark" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
.table-sm
ਸੈੱਲ ਪੈਡਿੰਗ ਨੂੰ ਅੱਧੇ ਵਿੱਚ ਕੱਟ ਕੇ ਟੇਬਲ ਨੂੰ ਹੋਰ ਸੰਖੇਪ ਬਣਾਉਣ ਲਈ ਜੋੜੋ ।
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ ਦ ਬਰਡ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-sm" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ ਦ ਬਰਡ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table table-sm table-dark" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td colspan= "2" > Larry the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ ਜਾਂ ਵਿਅਕਤੀਗਤ ਸੈੱਲਾਂ ਨੂੰ ਰੰਗ ਦੇਣ ਲਈ ਪ੍ਰਸੰਗਿਕ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਲਾਸ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਕਿਰਿਆਸ਼ੀਲ
ਸੈੱਲ
ਸੈੱਲ
ਡਿਫਾਲਟ
ਸੈੱਲ
ਸੈੱਲ
ਪ੍ਰਾਇਮਰੀ
ਸੈੱਲ
ਸੈੱਲ
ਸੈਕੰਡਰੀ
ਸੈੱਲ
ਸੈੱਲ
ਸਫਲਤਾ
ਸੈੱਲ
ਸੈੱਲ
ਖ਼ਤਰਾ
ਸੈੱਲ
ਸੈੱਲ
ਚੇਤਾਵਨੀ
ਸੈੱਲ
ਸੈੱਲ
ਜਾਣਕਾਰੀ
ਸੈੱਲ
ਸੈੱਲ
ਚਾਨਣ
ਸੈੱਲ
ਸੈੱਲ
ਹਨੇਰ
ਸੈੱਲ
ਸੈੱਲ
ਕਾਪੀ ਕਰੋ
<!-- On rows -->
<tr class= "table-active" > ...</tr>
<tr class= "table-primary" > ...</tr>
<tr class= "table-secondary" > ...</tr>
<tr class= "table-success" > ...</tr>
<tr class= "table-danger" > ...</tr>
<tr class= "table-warning" > ...</tr>
<tr class= "table-info" > ...</tr>
<tr class= "table-light" > ...</tr>
<tr class= "table-dark" > ...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class= "table-active" > ...</td>
<td class= "table-primary" > ...</td>
<td class= "table-secondary" > ...</td>
<td class= "table-success" > ...</td>
<td class= "table-danger" > ...</td>
<td class= "table-warning" > ...</td>
<td class= "table-info" > ...</td>
<td class= "table-light" > ...</td>
<td class= "table-dark" > ...</td>
</tr>
ਰੈਗੂਲਰ ਟੇਬਲ ਬੈਕਗ੍ਰਾਊਂਡ ਵੇਰੀਐਂਟ ਡਾਰਕ ਟੇਬਲ ਦੇ ਨਾਲ ਉਪਲਬਧ ਨਹੀਂ ਹਨ, ਹਾਲਾਂਕਿ, ਤੁਸੀਂ ਸਮਾਨ ਸਟਾਈਲ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਟੈਕਸਟ ਜਾਂ ਬੈਕਗ੍ਰਾਉਂਡ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
#
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
1
ਸੈੱਲ
ਸੈੱਲ
2
ਸੈੱਲ
ਸੈੱਲ
3
ਸੈੱਲ
ਸੈੱਲ
4
ਸੈੱਲ
ਸੈੱਲ
5
ਸੈੱਲ
ਸੈੱਲ
6
ਸੈੱਲ
ਸੈੱਲ
7
ਸੈੱਲ
ਸੈੱਲ
8
ਸੈੱਲ
ਸੈੱਲ
9
ਸੈੱਲ
ਸੈੱਲ
ਕਾਪੀ ਕਰੋ
<!-- On rows -->
<tr class= "bg-primary" > ...</tr>
<tr class= "bg-success" > ...</tr>
<tr class= "bg-warning" > ...</tr>
<tr class= "bg-danger" > ...</tr>
<tr class= "bg-info" > ...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class= "bg-primary" > ...</td>
<td class= "bg-success" > ...</td>
<td class= "bg-warning" > ...</td>
<td class= "bg-danger" > ...</td>
<td class= "bg-info" > ...</td>
</tr>
ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ
ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-only
ਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।
ਕ੍ਰਮਵਾਰ 576px, 768px, 992px, ਅਤੇ 1120px ਤੱਕ (ਪਰ ਇਸ ਵਿੱਚ ਸ਼ਾਮਲ ਨਹੀਂ) ਦੇ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਟੇਬਲ ਨੂੰ ਖਿਤਿਜੀ ਰੂਪ ਵਿੱਚ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋਏ, ਕਿਸੇ ਵੀ .table
ਨਾਲ ਲਪੇਟ ਕੇ ਜਵਾਬਦੇਹ ਟੇਬਲ ਬਣਾਓ ।.table-responsive{-sm|-md|-lg|-xl}
max-width
ਨੋਟ ਕਰੋ ਕਿ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਸਮੇਂ ਰੇਂਜ ਸੰਦਰਭ ਸਵਾਲਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ, ਅਸੀਂ ਇਹਨਾਂ ਤੁਲਨਾਵਾਂ ਲਈ ਉੱਚ ਸ਼ੁੱਧਤਾ ਵਾਲੇ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫ੍ਰੈਕਸ਼ਨਲ ਚੌੜਾਈ (ਜੋ ਕਿ ਉੱਚ-ਡੀਪੀਆਈ ਡਿਵਾਈਸਾਂ 'ਤੇ ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਹੋ ਸਕਦੇ ਹਨ) ਦੇ ਨਾਲ ਅਗੇਤਰਾਂ min-
ਅਤੇmax-
ਵਿਊਪੋਰਟਾਂ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਕੰਮ ਕਰਦੇ ਹਾਂ। .
ਇੱਕ <caption>
ਫੰਕਸ਼ਨ ਇੱਕ ਟੇਬਲ ਲਈ ਸਿਰਲੇਖ ਵਾਂਗ ਹੈ। ਇਹ ਸਕ੍ਰੀਨ ਰੀਡਰ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਸਾਰਣੀ ਲੱਭਣ ਅਤੇ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਸ ਬਾਰੇ ਹੈ ਅਤੇ ਫੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਉਹ ਇਸਨੂੰ ਪੜ੍ਹਨਾ ਚਾਹੁੰਦੇ ਹਨ।
ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਸੂਚੀ
#
ਪਹਿਲਾਂ
ਆਖਰੀ
ਹੈਂਡਲ
1
ਮਾਰਕ
ਓਟੋ
@mdo
2
ਜੈਕਬ
ਥੋਰਨਟਨ
@ਚਰਬੀ
3
ਲੈਰੀ
ਪੰਛੀ
@ਟਵਿੱਟਰ
ਕਾਪੀ ਕਰੋ
<table class= "table" >
<caption> List of users</caption>
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
ਜਵਾਬਦੇਹ ਸਾਰਣੀਆਂ ਟੇਬਲਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਖਿਤਿਜੀ ਰੂਪ ਵਿੱਚ ਸਕ੍ਰੋਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀਆਂ ਹਨ। .table
ਇੱਕ ਨਾਲ ਲਪੇਟ ਕੇ ਕਿਸੇ ਵੀ ਸਾਰਣੀ ਨੂੰ ਸਾਰੇ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ ਜਵਾਬਦੇਹ ਬਣਾਓ .table-responsive
। ਜਾਂ, ਇੱਕ ਵੱਧ ਤੋਂ ਵੱਧ ਬ੍ਰੇਕਪੁਆਇੰਟ ਚੁਣੋ ਜਿਸ ਨਾਲ ਇੱਕ ਜਵਾਬਦੇਹ ਸਾਰਣੀ ਨੂੰ ਵਰਤ ਕੇ ਹੋਵੇ .table-responsive{-sm|-md|-lg|-xl}
।
ਵਰਟੀਕਲ ਕਲਿਪਿੰਗ/ਟਰੰਕੇਸ਼ਨ
ਜਵਾਬਦੇਹ ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ overflow-y: hidden
, ਜੋ ਕਿਸੇ ਵੀ ਸਮਗਰੀ ਨੂੰ ਕਲਿੱਪ ਕਰਦਾ ਹੈ ਜੋ ਸਾਰਣੀ ਦੇ ਹੇਠਲੇ ਜਾਂ ਉੱਪਰਲੇ ਕਿਨਾਰਿਆਂ ਤੋਂ ਪਰੇ ਜਾਂਦੀ ਹੈ। ਖਾਸ ਤੌਰ 'ਤੇ, ਇਹ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਅਤੇ ਹੋਰ ਤੀਜੀ-ਧਿਰ ਵਿਜੇਟਸ ਨੂੰ ਕਲਿੱਪ ਕਰ ਸਕਦਾ ਹੈ।
ਹਰ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੇ ਪਾਰ, .table-responsive
ਖਿਤਿਜੀ ਸਕ੍ਰੋਲਿੰਗ ਟੇਬਲ ਲਈ ਵਰਤੋਂ।
#
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
1
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
2
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
3
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਕਾਪੀ ਕਰੋ
<div class= "table-responsive" >
<table class= "table" >
...
</table>
</div>
.table-responsive{-sm|-md|-lg|-xl}
ਕਿਸੇ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੱਕ ਜਵਾਬਦੇਹ ਟੇਬਲ ਬਣਾਉਣ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਵਰਤੋਂ । ਉਸ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਉੱਪਰ ਤੋਂ, ਸਾਰਣੀ ਆਮ ਤੌਰ 'ਤੇ ਵਿਵਹਾਰ ਕਰੇਗੀ ਅਤੇ ਖਿਤਿਜੀ ਸਕ੍ਰੋਲ ਨਹੀਂ ਕਰੇਗੀ।
#
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
1
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
2
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
3
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
#
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
1
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
2
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
3
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
#
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
1
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
2
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
3
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
#
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
ਸਿਰਲੇਖ
1
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
2
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
3
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਸੈੱਲ
ਕਾਪੀ ਕਰੋ
<div class= "table-responsive-sm" >
<table class= "table" >
...
</table>
</div>
<div class= "table-responsive-md" >
<table class= "table" >
...
</table>
</div>
<div class= "table-responsive-lg" >
<table class= "table" >
...
</table>
</div>
<div class= "table-responsive-xl" >
<table class= "table" >
...
</table>
</div>