Aplicarea marginilor celulelor de tabel (Programare, Html, Css)

DextrousDave a intrebat.
a intrebat.

Am un tabel HTML cu clasa „productsTable”. Vreau să dau fiecărei celule din tabel o margine. Acum am încercat următoarele în foaia mea de stil dar niciuna dintre cele două nu funcționează. Ce fac greșit? Vă mulțumesc

td.productsTable
{
    border: 1px dotted #999999;
}

.productsTable td
{
    border: 1px dotted #999999;
}

HTML:

<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>           
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>

Comentarii

  • Arată-mi codul tău html, de asemenea, pentru acest tabel –  > Por Javascript Coder.
  • Toate celelalte fiind egale, ambele vor funcționa… cu condiția ca markup-ul pe care îl ai să se potrivească cu selectorii pe care îi scrii. Dacă nu funcționează, atunci fie că marcajul tău nu se potrivește, fie că ai alte stiluri care le suprascriu pe acestea. Din moment ce nu putem vedea niciuna dintre ele, nu putem spune care. –  > Por Quentin.
4 răspunsuri
Curt

td.productsTable nu va funcționa pentru că nu aveți <td> elemente cu un productsTable clasă.

Cu toate acestea, cea de-a doua regulă CSS, .productsTable td, această va funcționa deoarece aveți <td> elemente care au un element părinte cu clasa productsTable.

Am făcut un mic exercițiu rapid și puteți vedea că funcționează corect:

Dacă acest lucru nu funcționează pentru dvs., este posibil să nu fi legat corect fișierul CSS sau să existe o altă regulă CSS care să prevaleze asupra acesteia. Încercați inspectați elementul pentru a vedea.

Comentarii

  • Mulțumesc, funcționează. Apreciez ajutorul tău… cred că fișierul a avut nevoie de mult timp pentru a ajunge la server, poate… chiar îmi pierd timpul cu probleme de genul acesta. –  > Por DextrousDave.
AlphaMale

Vreau să dau fiecărei celule din tabel o margine.

Ceea ce am înțeles este că vrei o margine a celulei așa:

Aici este fiddle de ceea ce doriți.

Folosiți următorul CSS:

table.productsTable {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: separate;
    background-color: white;
}

table.productsTable td {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: white;
    -moz-border-radius: ;
}

Sper că vă ajută.

Sandeep

scrieți astfel:

.products td
{
    border: 1px dotted #999999;
}

HTML

<table class="products">
 <tr>
  <td></td>
</tr>
</table>

Comentarii

  • Dar asta va avea efect doar asupra tuturor td-urilor, nu asta a vrut el. –  > Por eric.itzhak.
  • Sunt de acord cu tine, dar el nu a arătat structura sa HTML Deci, este greu de înțeles cum structura sa html. –  > Por sandeep.
  • Dacă nu se poate răspunde rezonabil la o întrebare, nu răspundeți la ea. –  > Por Quentin.
  • @Quentin dacă ai văzut întrebarea îți faci o idee care să spună ce a greșit OP. –  > Por sandeep.
Plancton

Codul de mai jos face următoarele:-1. oferă o singură margine pentru td’s2. margine separată pentru tabel.

Mediu: -Funcționează pe FF 34.0.

Neîncercat pentru html6:- Pentru a-l rula folosind html6, încercați-l cu html:x, de exemplu, html:head, html:title, etc.

<!DOCTYPE html>
<html>
<head>
    <script>
    </script>
    <title>Welcome to the jungle</title>
    <style>
.table_main {
        border-top-style: ridge;
        border-bottom-style: ridge;
        border-left-style: ridge;
        border-right-style: ridge;
        border-color: red;
        border-width: 3px;
      }

.table_main td {
    background: #A38055;    
    border-right: solid 1px white ;
    border-bottom: 1px solid white;
    text-align: center;
}

.table_main th {
    background: #DCDCDC;
    border-right: solid 1px white ;
    border-bottom: 1px solid white;
    text-align: center;
}

  </style>
</head>
  <body>
    <h1>Welcome to the jungle</h1>
    <table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
     <thead>       <th>THead1</th> <th>THead2</th> <th>THead3</th>
     </thead> 
      <tbody>
        <tr> <td>A</td> <td>B</td> <td>C</td> </tr>
        <tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>
        <tr> <td>Xena</td> <td>Yoda</td> <td>Zohan</td> </tr>
      </tbody>
    </table>

  </body>
</html>

Tags:,