border-spacing ဂုဏ်သတ္တိ

border-spacing ဂုဏ်သတ္တိသည် HTML ဇယားကွက် ၏ td သို့မဟုတ် th ဆဲလ်များအကြား (နှင့် ဆဲလ်နယ်နိမိတ်နှင့် ဇယားကွက်ကိုယ်တိုင်၏ နယ်နိမိတ်အကြား) အကွာအဝေးကို သတ်မှတ်ပေးသည်။ ဂုဏ်သတ္တိ၏ တန်ဖိုးမှာ ရာခိုင်နှုန်းများမှလွဲ၍ မည်သည့် အရွယ်အစားယူနစ်များ မဆို ဖြစ်နိုင်သည်။

ဝါကျဖွဲ့ပုံ

cssရွေးချယ်မှု {
  border-spacing: တန်ဖိုးတစ်ခု သို့မဟုတ် နှစ်ခု;
}

တန်ဖိုးများ

စံထားရှိသော တန်ဖိုး- 0။ သို့သော်၊ ဘရောက်ဆာအတွက် cellspacing ဂုဏ်သတ္တိ၏ ကိုယ်ပိုင်သတ်မှတ်ချက် (သုညမဟုတ်သော) ရှိနေသောကြောင့် ဆဲလ်များအကြား အကွာအဝေးများကို သင်မြင်တွေ့ရမည်ဖြစ်သည်။

မှတ်သားဖွယ်ရာများ

ဂုဏ်သတ္တိကို ၎င်း၏ဆဲလ်များအတွက်မဟုတ်ဘဲ ဇယားကွက်များအတွက် အသုံးပြုပါ (ဆဲလ်များအတွက် အလုပ်မလုပ်ပါ)။

အလားတူအကျိုးသက်ရောက်မှုကို margin ကို အသုံးပြု၍ ရယူ၍မရနိုင်ပါ၊ အဘယ်ကြောင့်ဆိုသော် ဇယားကွက်ဆဲလ်များအတွက် margin သည် အလုပ်မလုပ်ပါ။

border-collapse ဂုဏ်သတ္တိကို collapse တန်ဖိုးဖြင့် သတ်မှတ်ထားပါက - border-spacing သည် အလုပ်မလုပ်တော့ပါ။

နမူနာ . တန်ဖိုးတစ်ခု

ဆဲလ်များအကြား (နှင့် ဆဲလ်နှင့် ဇယားကွက်နယ်နိမိတ်အကြား) အကွာအဝေးကို 10px အတိုင်း ပြုလုပ်ကြပါစို့။

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

နမူနာ . တန်ဖိုးနှစ်ခု

ယခု အလျားလိုက်အတွက် 10px နှင့် ဒေါင်လိုက်အတွက် 30px အကွာအဝေးများ သတ်မှတ်ကြပါစို့။

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

နမူနာ . border-collapse: collapse သတ်မှတ်ခြင်း

ဤနေရာတွင် border-collapse ဂုဏ်သတ္တိ၏ collapse တန်ဖိုးကြောင့် border-spacing သည် အလုပ်မလုပ်တော့ပါ။

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: