سی ایس ایس جدول

ਪੂਰੇ ਚੌੜਾਈ ਪੈਮੇਨਰ

ਕੁਝ ਹਾਲਾਤਾਂ ਵਿੱਚ ਉੱਪਰਲੇ ਪੈਮੇਨਰ ਦੀ ਚੌੜਾਈ ਨੂੰ ਚਾਹੀਦੀ ਹੈ ਜਿਵੇਂ ਪੂਰੇ ਸਕਰੀਨ (ਪੂਰੇ ਚੌੜਾਈ) ਦੇ ਵਿੱਚ ਹੋਵੇ। ਜੇਕਰ ਤੁਸੀਂ ਪੂਰੇ ਸਕਰੀਨ ਵਿੱਚ ਪੈਮੇਨਰ ਲਗਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ <table> ਐਲੀਮੈਂਟ ਨੂੰ width: 100% ਲਗਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ:

ਇੱਕ ਉਦਾਹਰਣ

table {
  width: 100%;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਦੁਆਰਾ ਬਰਾਰੀਆਂ

ਧਿਆਨ ਦੇਵੋ ਕਿ ਉੱਪਰਲੇ ਪੈਮੇਨਰ ਦੀਆਂ ਬਰਾਰੀਆਂ ਦੁਆਰਾ ਦੁਆਰਾ ਹਨ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿ ਪੈਮੇਨਰ ਅਤੇ th ਅਤੇ td ਐਲੀਮੈਂਟ ਦੀਆਂ ਬਰਾਰੀਆਂ ਵੱਖ ਰੂਪ ਵਿੱਚ ਹਨ。

ਜੇਕਰ ਤੁਸੀਂ ਦੁਆਰਾ ਬਰਾਰੀਆਂ ਹਟਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਦੇਖੋ.

ਪੈਮੇਨਰ ਬਰਾਰੀਆਂ ਮਿਲਾਉਣਾ

border-collapse ਅਟਰੀਬਿਊਟ ਸੈਟ ਕਰੋ ਕਿ ਪੈਮੇਨਰ ਦੀਆਂ ਬਰਾਰੀਆਂ ਨੂੰ ਇੱਕ ਬਰਾਰੀ ਵਿੱਚ ਰੱਖਣਾ ਹੈ ਕਿਨਾਂ ਕਰੋ:

ਇੱਕ ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਸਿਰਫ਼ ਪੈਮੇਨਰ ਦੇ ਚੱਕਰ ਵਿੱਚ ਬਰਾਰੀ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ <table> ਨੂੰ ਬਰਾਰੀ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ: border padding

ਇੱਕ ਉਦਾਹਰਣ

table {
  border: 1px solid black;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਪੈਮੇਨਰ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ

ਪੈਮੇਨਰ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ width ਅਤੇ height ਅਟਰੀਬਿਊਟ ਪਰਿਭਾਸ਼ਾ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਪੈਮੇਨਰ ਦੀ ਚੌੜਾਈ 100% ਰੱਖੀ ਗਈ ਹੈ ਅਤੇ <th> ਐਲੀਮੈਂਟ ਦੀ ਉਚਾਈ 50px ਰੱਖੀ ਗਈ ਹੈ:

ਇੱਕ ਉਦਾਹਰਣ

table {
  width: 100%;
}
th {
  height: 50px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਪੈਮੇਨਰ ਨੂੰ ਹਾਲਫ ਪੇਜ ਤੱਕ ਪੈਮੇਨਰ ਦਾ ਵਿਸ਼ਾਲਤਾ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ width: 50%: ਵਰਤੋਂ ਕਰੋ

ਇੱਕ ਉਦਾਹਰਣ

table {
  width: 50%;
}
th {
  height: 70px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਹੱਲਾਤੀ ਸਾਮੇਲੀ

text-align ਅਟਰੀਬਿਊਟ ਸੈਟ ਥੇ ਜਾਂ ਟੀਡੀ ਵਿੱਚ ਵਰਤਕ ਦੀ ਹੱਲਾਤੀ ਸਾਮੇਲੀ ਪ੍ਰਕਿਰਿਆ (ਬਾਈ, ਦੁਪਾਰ ਜਾਂ ਸਾਮੇਲੀ).

ਮੂਲ ਰੂਪ ਵਿੱਚ, <th> ਐਲੀਮੈਂਟ ਦਾ ਵਰਤਕ ਸਾਮੇਲੀ ਹੈ ਜਦਕਿ <td> ਐਲੀਮੈਂਟ ਦਾ ਵਰਤਕ ਬਾਈ ਸਾਮੇਲੀ ਹੈ.

ਜੇਕਰ ਤੁਸੀਂ <td> ਐਲੀਮੈਂਟ ਵਿੱਚ ਵਰਤਕ ਨੂੰ ਸਾਮੇਲੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ text-align: center: ਵਰਤੋਂ ਕਰੋ

ਇੱਕ ਉਦਾਹਰਣ

th {
  text-align: center;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ <th> ਐਲੀਮੈਂਟ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਬਾਈ ਸਾਮੇਲੀ ਕਰਨ ਲਈ:

ਇੱਕ ਉਦਾਹਰਣ

th {
  padding: 15px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਵਰਤਕ ਸਾਮੇਲੀ

vertical-align ਅਟਰੀਬਿਊਟ ਸੈਟ ਥੇ ਜਾਂ ਟੀਡੀ ਵਿੱਚ ਵਰਤਕ ਦੀ ਵਰਤਕ ਸਾਮੇਲੀ ਪ੍ਰਕਿਰਿਆ (ਉੱਪਰ, ਨਿਚੋਰ ਜਾਂ ਸਾਮੇਲੀ).

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਸਾਰੇ ਸਾਰੇ ਪੈਮੇਨਰ ਵਿੱਚ ਟੈਕਸਟ ਦੀ ਵਰਤਕ ਸਾਮੇਲੀ ਹੈ (ਥੇ ਅਤੇ ਟੀਡੀ ਐਲੀਮੈਂਟ ਹਰੇਕ ਹਨ).

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ <td> ਐਲੀਮੈਂਟ ਦੇ ਵਰਤਕ ਟੈਕਸਟ ਨੂੰ ਨਿਚੋਰ ਲਗਾਉਣ ਲਈ:

ਇੱਕ ਉਦਾਹਰਣ

td {
  height: 50px;
  vertical-align: bottom;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸਟੇਬਲ ਅੰਦਰੂਨੀ ਮੂਰਤੀ

ਸਟੇਬਲ ਅੰਦਰੂਨੀ ਮੂਰਤੀ ਜੇਕਰ ਬਾਹਰੀ ਹੰਗਾਮੀ ਅਤੇ ਸਟੇਬਲ ਸਮਗਰੀ ਦਰਮਿਆਨ ਦੂਰੀ ਨਿਯੰਤਰਿਤ ਕਰਨੀ ਹੈ, ਤਾਂ <td> ਅਤੇ <th> ਐਲੀਮੈਂਟਾਂ ਉੱਤੇ padding

ਇੱਕ ਉਦਾਹਰਣ

ਵਿਸ਼ੇਸ਼ਤਾ, ਅਤੇ ਹੰਗਾਮੀ ਪੱਧਰ ਵਿੱਚ ਵੰਡ ਦਿਸ਼ਾ ਦਿੱਤੀ ਗਈ ਹੈ:
  ਵਿਸ਼ੇਸ਼ਤਾ:
  padding: 15px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

text-align: left;

ਹੰਗਾਮੀ ਪੱਧਰ ਸਟੇਬਲ ਅਤੇ <td> ਐਲੀਮੈਂਟਾਂ ਨੂੰ border-bottom

ਇੱਕ ਉਦਾਹਰਣ

ਵਿਸ਼ੇਸ਼ਤਾ, ਅਤੇ ਹੰਗਾਮੀ ਪੱਧਰ ਵਿੱਚ ਵੰਡ ਦਿਸ਼ਾ ਦਿੱਤੀ ਗਈ ਹੈ:
  th, td {
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

border-bottom: 1px solid #ddd;

ਸਟੇਬਲ ਵਰਗ ਜਦੋਂ ਮਾਉਸ ਨਾਲ ਸਟੇਬਲ ਵਰਗ ਉੱਤੇ ਹੋਵੇ, ਤਾਂ ਸਟੇਬਲ ਵਰਗ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ :hover

ਇੱਕ ਉਦਾਹਰਣ

tr:hover {background-color: #f5f5f5;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਤੇਜਾ ਸਟੇਬਲ

ਜਦੋਂ ਤੇਜਾ ਸਟੇਬਲ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ, ਤਾਂ nth-child() ਚੋਣਕਾਰ, ਅਤੇ ਸਾਰੇ ਅਸੰਗਤ (ਜਾਂ ਵਿਅਕਤੀਗਤ) ਸਟੇਬਲ ਵਰਗਾਂ ਨੂੰ background-color:

ਇੱਕ ਉਦਾਹਰਣ

tr:nth-child(even) {background-color: #f2f2f2;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸਟੇਬਲ ਰੰਗ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ <th> ਐਲੀਮੈਂਟ ਦੇ ਪਿੱਟਰ ਰੰਗ ਅਤੇ ਟੈਕਸਟ ਰੰਗ ਸੈਟ ਕਰਦਾ ਹੈ:

ਇੱਕ ਉਦਾਹਰਣ

th {
  background-color: #4CAF50;
  color: white;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਰੈਸਪੋਂਸਿਵ ਸਟੇਬਲ

ਜੇਕਰ ਸਕਰੀਨ ਬਹੁਤ ਛੋਟਾ ਹੈ ਕਿ ਸਾਰੀ ਸਮਗਰੀ ਦਿਸ਼ਾ ਨਹੀਂ ਦਿਸ ਸਕੇ, ਤਾਂ ਰੈਸਪੋਂਸਿਵ ਸਟੇਬਲ ਵਿੱਚ ਹੰਗਾਮੀ ਰੋਲਰ ਦਿਸੇਗਾ:

<table> ਐਲੀਮੈਂਟ ਦੇ ਚੁੱਂਬਕ ਵਿੱਚ ਸੈਟ ਕਰੋ: overflow-x:auto ਦੇ ਕੰਟੇਨਰ ਐਲੀਮੈਂਟ (ਉਦਾਹਰਣ ਵਜੋਂ <div>) ਨੂੰ ਰੈਸਪੋਂਸਿਵ ਪ੍ਰਭਾਵ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸੈਟ ਕਰੋ:

ਇੱਕ ਉਦਾਹਰਣ

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਟਿੱਪਣੀਆਂ:OS X Lion (ਮੈਕ 'ਤੇ) ਵਿੱਚ, ਰੋਲਰ ਮੂਲ ਰੂਪ ਵਿੱਚ ਛੁਪਾਇਆ ਹੋਇਆ ਹੈ ਅਤੇ ਜਦੋਂ ਇਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ (ਭਾਵੇਂ "overflow:scroll" ਸੈਟ ਕੀਤਾ ਹੋਵੇ ਅਤੇ ਵੀ)

CSS ਸਟੇਬਲ ਵੇਰਵਾ

کوڈی وووسی کا مضمون صرف تربیت اور ٹیسٹ کیلئے دستیاب ہوتا ہے، صحت و صحت کا تعهد نہیں ہوتا ہے۔ اس سائٹ کا استعمال کے ذریعے آئیڈیا کا استعمال کا خطرہ اس سائٹ سے منسلک نہیں ہوتا ہے۔ حقوق کا احاطہ، تمام حقوق رکھا گیا ہے۔

کوڈی وووسی کے بارے میں کوڈی وووسی کی مدد استعمال شرط پریویسی شرط