HTML ikki <a> chegarasini birlashtiradi

I have a table with multiple elements within:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.TableClass td {
  background-color: #050;
  height: 150px;
}

.TableClass a {
  background-color: #f00;
  width: 100px;
  height: 100px;
  display: block;
  border: 5px solid #000;
}
<div class="TableClass">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        
      </td>
      <td>
        
      </td>
    </tr>
  </table>
</div>
</div> </div>

Fiddle: https://jsfiddle.net/p937jbee/1/

Ikkala chegaradan qochishning bir yo'li bormi?

enter image description here

UPDATE: I can't change the HTML code and there are multiple <td> instead of 2 of my example.

3
@Toshi Men bilganimdagina, Border Collapse sizning HTML sozlamangizni ishlamaydi va siz HTMLni o'zgartira olmaysiz deb yozgansiz. Yig'ilish table CSS-ga emas, balki table-> td CSS-ga qo'llanilishi kerak. Bundan tashqari, display: block bilan ishlamaydi, siz display: table dan foydalanishingiz kerak; Mana bir misol: jsfiddle.net/ysv6LLc0/1
qo'shib qo'ydi muallif Albert Renshaw, manba
border-collapse hiylasi faqat a xususiyatiga a o'rniga td ni tayinlaganingizda ishlaydi. Keyin display: table kabi fokuslarga ehtiyoj yo'q.
qo'shib qo'ydi muallif Mr Lister, manba
qo'shib qo'ydi muallif Gordon, manba
Bu yerga qarab ko'ring: w3schools.com/css/…
qo'shib qo'ydi muallif Gordon, manba
Hech kim "i-chegara qulashi: kollaps" degani yo'q.
qo'shib qo'ydi muallif Gordon, manba
@Gordon bu qanday ishlaydi? Buni fiddlega qo'shib qo'ying.
qo'shib qo'ydi muallif Toshi, manba
@Gordon, men uni saqlashim kerak bo'lgan dizayn masalasidir
qo'shib qo'ydi muallif Toshi, manba
@AlbertRenshaw Men tanlagan qaysi qarorni hal qilmadim, Gordondan kelgan border-collapse: collapse; juda toza ko'rinadi, lekin uni ishga tushira olmayman
qo'shib qo'ydi muallif Toshi, manba
@Gordon Men qo'shganimni sinab ko'rdim, ishlamayapti :( Iltimos menga yordam bera olasizmi?
qo'shib qo'ydi muallif Toshi, manba

10 javoblar

Bu erda bir nechta hujayralar uchun yechim mavjud:

Birinchidan tashqari barcha chekka uchun chap chegarani noldan chiqarish kerak

.TableClass tr td:not(:first-child) a {
  border-left: 0;
}

Parchani ko'rib chiqing

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.TableClass td
{
   background-color: #005500;
   height: 150px;
}
.TableClass a
{
 background-color: #ff0000;
 width: 100px;
 height: 100px;
 display: block;
 border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
  border-left: 0;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
  <td> 
  
  </td>
  <td>
         
  </td>
  <td> 
  
  </td>
  <td>
         
  </td>
</tr>
</table>
</div>
</div> </div>

https://jsfiddle.net/54o0efuv/

2
qo'shib qo'ydi
Bu @ Toshi uchun yaxshi yechim bo'lib, uni qabul qilishingiz kerak va xabarni yechilgan imo deb belgilang
qo'shib qo'ydi muallif Albert Renshaw, manba

Just add a seperate class to one or both of the boxes where you remove the border ex. JSFIDDLE

a.one{
      border-left: 0px;
}

html:

 
2
qo'shib qo'ydi
@Toshi Bu erda siz jsfiddle.net/qq6mwj0h/1
qo'shib qo'ydi muallif Linushg111, manba
Bundan tashqari faqat CSS-ning echimi bormi? HTML kodini o'zgartira olmayman
qo'shib qo'ydi muallif Toshi, manba

Keyinchalik mustahkam tarkibga ega bo'lish uchun oxirgi tddan tashqari o'ng chegarani tark etishni taklif qilaman. Agar siz ko'proq bloklarni qo'shmoqchi bo'lsangiz.

CSS

.TableClass td {
    background-color: #005500;
    height: 150px;
}
.TableClass td a {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    display: block;
    border: 5px solid #000000;
    border-right: 0;
}
.TableClass td:last-of-type a {
    border-right: 5px solid #000000;
}
1
qo'shib qo'ydi
qo'shib qo'ydi muallif Toshi, manba

Eng sodda usul: border-collapse: collapse ni jadvalga tayinlash va a xususiyatidan a elementlaridan > Td s. Buning hammasi o'zgarishi kerak.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.TableClass table {
  border-collapse: collapse; /* new */
}

.TableClass td {
  background-color: #005500;
  height: 150px;
  border: 5px solid #000000; /* moved */
}

.TableClass a {
  background-color: #ff0000;
  width: 100px;
  height: 100px;
  display: block;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
  <td> 
  
  </td>
  <td>
         
  </td>
</tr>
</table>
</div>
</div> </div>
1
qo'shib qo'ydi
Men siz xohlagan narsani o'yladim. Sizning namunangizda a s atrofida bo'sh joy yo'q, shuning uchun chegaralar bir joyda.
qo'shib qo'ydi muallif Mr Lister, manba
Xo'sh, haqiqiy sahifada nimani nazarda tutasiz, xujayralarda faqatgina bog'lanishdan ko'ra ko'proq tarkib bormi? Men xabardor emas edim, uzr.
qo'shib qo'ydi muallif Mr Lister, manba
Endi chegaradagi barcha hujayraning atrofida faqatgina aloqani emas, balki qiziqarli yondashuv, javobingiz uchun rahmat
qo'shib qo'ydi muallif Toshi, manba
Markazning chekkasi yaxshi, lekin yuqori va pastki chegara endi td va a ni ajratmaydi
qo'shib qo'ydi muallif Toshi, manba
Yo'q, faqatgina aloqalar
qo'shib qo'ydi muallif Toshi, manba

This should work even if you have multiple elements and not just 2. https://jsfiddle.net/p937jbee/4/

.TableClass td
{
   background-color: #005500;
   height: 150px;
}
.TableClass a
{
 background-color: #ff0000;
 width: 100px;
 height: 100px;
 display: block;
 border: 4px solid #000000;
}

.TableClass td:first-child a {
  border-right: 2px solid #000000;
}
.TableClass td:last-child a {
  border-left: 2px solid #000000;
}
1
qo'shib qo'ydi

Seefiddle

CSS qo'shish

.TableClass td:nth-child(2) a {
 border-left:none;
}
1
qo'shib qo'ydi
Bu faqat ikkita quti bo'lsa, u ishlaydi
qo'shib qo'ydi muallif Albert Renshaw, manba
Ko'proq qo'shilganlarni ko'ring jsfiddle.net/p937jbee/5
qo'shib qo'ydi muallif Jagdish Parmar, manba
border-collapse: collapse;

Ushbu CSS-dan foydalaning

Chegara qulashi xususiyati elementlarda (yoki jadval orqali ko'rsatiladigan jadval kabi harakat qilish uchun qo'yilgan elementlar uchun ishlatilishi mumkin: jadval yoki ekran: inline-table).

1
qo'shib qo'ydi
Yaxshi, lekin endi yashil fon rangi yo'q - buni iltimos qo'shishingiz mumkin. Mening fikrimcha, bu eng toza yechim
qo'shib qo'ydi muallif Toshi, manba
iltimos, mening fiddleimni yangilaysizmi? Men ushbu yechimni ishga tushira olmayman
qo'shib qo'ydi muallif Toshi, manba
jsfiddle.net/p937jbee/8 namunangizni ko'ring.
qo'shib qo'ydi muallif Nitin Kanish, manba

XT HTML-ni o'zgartirmasliklari uchun hacky CSS-ni qo'llashi mumkinligini ta'kidlagan. Shuning uchun men sizlarning ko'pchiligingizda qovushgan salbiy cheklovlardan foydalanaman, ammo boshqa variantlarni ko'rmayapman.

Quyidagi CSS-dan foydalaning:

.TableClass td {
   background-color: #005500;
   height: 150px;
}
.TableClass a {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    display: block;
    border: 5px solid #000000;
    margin-left:-5px;
}
.TableClass td:nth-child(1) a {
    margin-left:0px;
}
0
qo'shib qo'ydi
@MrLister Ular bir xil javob emas, birinchidan, a ga 5 marjini qo'shganman, so'ngra fon o'lchamini 5px bilan qo'lda oshirish. Ushbu versiyada men faqat bitta emas, faqat bitta a -5 marginini qo'llayman va fonda kattalashtirish kerak emas. Avvalgi narsani avval qoldirgan edim, chunki o'shanday o'ylayman, o'shanda uni ishlatish mumkin, va o'shanda u o'qigan bo'lsa, uni o'chirib tashlamoqchi emasman. Buni mening e'tiborimga yetkazganingiz uchun tashakkur. Endi boshqasini o'chirib tashlayman, chunki hozirgi vaqtda OP ham ikkalasini ko'rgan.
qo'shib qo'ydi muallif Albert Renshaw, manba
Menda bo'lgani kabi @ sheriffderek
qo'shib qo'ydi muallif Albert Renshaw, manba
Men sizning yechimingiz uchun minnatdorman, lekin men faqatgina salbiy cheklovlarni oxirgi chora sifatida foydalanardim.
qo'shib qo'ydi muallif sheriffderek, manba
Men bu fikrni tushunmayapman. O'R ni htmlni o'zgartirishi mumkin bo'lsa ham, siz CSS bilan chegarani o'zgartirishingiz kerak. Bu bema'nilik.
qo'shib qo'ydi muallif sheriffderek, manba
Javob sifatida - bu sizning birinchi chora.
qo'shib qo'ydi muallif sheriffderek, manba
@AlbertRenshaw Nega bir xil javobni ikki marta chop qilyapsiz?
qo'shib qo'ydi muallif Mr Lister, manba
qo'shib qo'ydi muallif Toshi, manba

Tez javob:

You have to do 2 things, use the nth-of-type on a repeating element, in this case <td> and change how you write your brackets. :P - but really, you may need to say, every 2nd or third block - depending on how you do things. You may want to just use a list instead of a table - depending on the goal. :nth-of-type(2n+2) etc. Look her up. : )

HTML

<table cellspacing="0" cellpadding="0" class="table">
  <tr>
    <td> 
      
    </td>
    <td>
          
    </td>
  </tr>
</table>

CSS

.table a {
  background: #ff0000;
  width: 100px;
  height: 100px;
  display: block;
  border: 4px solid #000000;
}

.table td:nth-of-type(odd) a {
  border-right: 2px solid black;
}

.table td:nth-of-type(even) a {
  border-left: 2px solid black;
}

https://jsfiddle.net/6bgbmde5/

or you can use the background of the tr

.table tr {
  display: block;
  background: black;
  padding: 4px;
}

.table a {
  background: red;
  width: 100px;
  height: 100px;
  display: block;
}

.table td:not(:last-of-type) a {
  margin-right: 4px;
}

There are many ways that all have side-effects and it all depends on hovers and all sorts of stuff. Good luck!

0
qo'shib qo'ydi
@sheriffderek sizning haqingizdagini bilasiz, javoblar ustida bahslashish bu sayt ruhida emas. Uzr so'rayman
qo'shib qo'ydi muallif Albert Renshaw, manba
Men yechimga erishish uchun chegara kengligini o'zgartirishga qarshi maslahat beraman. OP, chegara kengligi 5 emas, balki 4 emas. Bundan tashqari, bu HTML-da ikkitadan ortiq langar bo'lsa, bu bajarilmaydi. jsfiddle.net/nt23Lokt/1
qo'shib qo'ydi muallif Albert Renshaw, manba
Agar shunday bo'lsa: emogi-hug, men uni bu erga qo'yardim.
qo'shib qo'ydi muallif sheriffderek, manba
Boshqa faktlarim har qanday quti bilan ishlashning turli usullarini namoyish etadi. Men bu haqda munozara qilishni istamayman. Bu mening javobim. Tanlash uchun ko'p javoblar mavjud.
qo'shib qo'ydi muallif sheriffderek, manba
qo'shib qo'ydi muallif sheriffderek, manba
Ha. Ko'p yo'llar bor. jsfiddle.net/6bgbmde5/2
qo'shib qo'ydi muallif sheriffderek, manba
Bu ishni bir nechta <td> uchun qilishning usul bormi? jsfiddle.net/6bgbmde5/1
qo'shib qo'ydi muallif Toshi, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.TableClass td
{
   background-color: #005500;
   height: 150px;
}
.TableClass a
{
 background-color: #ff0000;
 width: 100px;
 height: 100px;
 display: block;
 
}

.elem1{
  border-top: 5px solid #000000;
  border-bottom: 5px solid #000000;
  border-left: 5px solid #000000;
  }
  
  .elem2{
  border-top: 5px solid #000000;
  border-bottom: 5px solid #000000;
  border-left: 5px solid #000000;
  border-right: 5px solid #000000;
  }
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<td> 

</td>
<td>
       
</td>
</table>
</div>
</div> </div>

Bu erda yangilangan skripka, umid qilamanki, siz uchun yechim bo'lishi mumkin

0
qo'shib qo'ydi
Bundan tashqari faqat CSS-ning echimi bormi? HTML kodini o'zgartira olmayman
qo'shib qo'ydi muallif Toshi, manba
Banzay tomonidan taqdim etilgan yechimni faqat CSS uchun ko'rishingiz mumkin
qo'shib qo'ydi muallif ashfaqrafi, manba