Este posibil acest lucru prin intermediul CSS?
Am'm încercat
tr.classname {
border-spacing: 5em;
}
fără nici un rezultat. Poate am'm a face ceva gresit?
Trebuie să utilizați umplutură pe " td " elemente. Ceva de genul asta ar trebui să facă truc. Puteți, desigur, pentru a obține același rezultat folosind un padding top în loc de umplutură de jos.
În codul CSS de mai jos, mai mare decât un semn înseamnă că umplutură se aplică doar la "td", elemente care sunt direct copiii să tr
elemente cu clasa spaceUnder
. Acest lucru va face posibil să se utilizeze tabele imbricate. (Celule C și D în exemplul de cod.) Am'nu sunt prea sigur de browser-ul de sprijin pentru copil direct selector (cred ca IE 6), dar nu ar trebui't sparge codul în orice browserele moderne.
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
Acest lucru ar trebui să facă ceva de genul asta:
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
În tabelul părinte, încercați să setați
border-collapse:separate;
border-spacing:5em;
Plus o frontieră declarație, și a vedea dacă aceasta atinge efectul dorit. Feriți-vă, totuși, că IE nu't suport "separate de frontiere" model.
Aveți tabelul cu id-ul de albume cu orice date... am omis trs și tds
<table id="albums" cellspacing="0">
</table>
În css:
table#albums
{
border-collapse:separate;
border-spacing:0 5px;
}
din moment ce am o imagine de fundal în spatele mesei, se preface cu alb padding-ar't de lucru. Am optat pentru a pune un rând liber între fiecare rând de conținut:
<tr class="spacer"><td></td></tr>
apoi, utilizați css pentru a da distanțier rânduri o anumită înălțime și fundal transparent.
De La Mozilla Developer Network:
border-spacing CSS proprietate specifică distanța dintre frontierele de celule adiacente (numai pentru separate de frontiere model). Acest lucru este echivalent cu atributul cellspacing în prezentare HTML, dar, opțional, un al doilea valoare poate fi folosit pentru a seta diferite pe orizontală și pe verticală distanța.
Ultima parte este de multe ori neobservat. Exemplu:
.your-table {
border-collapse: separate; /* allow spacing between cell borders */
border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */
UPDATE
Acum înțeleg că OPERAȚIUNEA vrea specifice, separate rânduri au crescut de la distanță. Am'am adăugat un setup cu tbody` elemente care realizează că fără a distruge semantica. Cu toate acestea, am'm nu sunt sigur dacă acesta este sprijinit pe toate browserele. Am făcut-o în Chrome.
Exemplul de mai jos este pentru a arăta cum puteți face să arate ca masă există de rânduri separate, complet cu sufletul la gură css dulceață. De asemenea, a dat primul rând mai spațierea cu tbody
setup. Simțiți-vă liber pentru a utiliza!
Suport notificare: IE8+, Chrome, Firefox, Safari, Opera 4+
.spacing-table {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 15px;
border-collapse: separate;
table-layout: fixed;
width: 80%;
border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
text-align: left;
padding: 5px 15px;
}
.spacing-table td {
border-width: 3px 0;
width: 50%;
border-color: darkred;
border-style: solid;
background-color: red;
color: white;
padding: 5px 15px;
}
.spacing-table td:first-child {
border-left-width: 3px;
border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
border-right-width: 3px;
border-radius: 0 5px 5px 0;
}
.spacing-table thead {
display: table;
table-layout: fixed;
width: 100%;
}
.spacing-table tbody {
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0 10px;
}
<table class="spacing-table">
<thead>
<tr>
<th>Lead singer</th>
<th>Band</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bono</td>
<td>U2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Chris Martin</td>
<td>Coldplay</td>
</tr>
<tr>
<td>Mick Jagger</td>
<td>Rolling Stones</td>
</tr>
<tr>
<td>John Lennon</td>
<td>The Beatles</td>
</tr>
</tbody>
</table>
Puteți't schimba marja de-o celulă de tabel. Dar PUTEȚI schimba padding. Schimba padding de TD, ceea ce va face ca celula mai mare și împingeți text departe de partea cu creșterea umplutură. Dacă aveți linii de frontieră, cu toate acestea, ea a câștigat încă't fi exact ceea ce vrei.
Trebuie să setați border-collapse: separat;
pe masă; cele mai multe browser-ul implicit de foi de stil încep de la border-collapse: collapse;
, care șanțuri distanța de frontieră.
De asemenea, border-spacing: merge pe "TD", nu TR
.
Încercați:
<html><head><style type="text/css">
#ex { border-collapse: separate; }
#ex td { border-spacing: 1em; }
</style></head><body>
<table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
Ok, o poti face
tr.classname td {background-color:red; border-bottom: 5em solid white}
Asigurați-vă că culoarea de fundal este setată pe td, mai degrabă decât pe rând. Acest lucru ar trebui să funcționeze pe cele mai multe browsere... (Chrome, ie & ff testat)
Aruncati o privire la border-collapse: se separa atribut (implicit) și border-spacing de proprietate.
În primul rând, trebuie să separat cu border-collapse, atunci puteți defini spațiu între coloane și rânduri cu border-spacing .
Ambele aceste proprietăți CSS sunt de fapt bine-a sprijinit pe fiecare browser-ul, vezi aici.
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td,
table th {border: 1px solid black;}
<table>
<tr>
<td>Some text - 1</td>
<td>Some text - 1</td>
</tr>
<tr>
<td>Some text - 2</td>
<td>Some text - 2</td>
</tr>
<tr>
<td>Some text - 3</td>
<td>Some text - 3</td>
</tr>
</table>
Pentru a crea o iluzie de spațiere între rânduri, se aplică culoarea de fundal la rând și apoi să creați un chenar gros de culoare albă, astfel încât un "space" este creat :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
Am dat peste aceasta în timp ce se luptă cu o problemă similară. Am'am găsit Varun Natraaj's a răspunde pentru a fi destul de util, dar mi-ar folosi o margine transparentă în loc.
td { border: 1em solid transparent; }
Frontiere transparente încă lățime.
Lucrările pentru cele mai recente browsere în 2015. Soluție simplă. Nu't de lucru pentru transparent, dar, spre deosebire de Thoronwen's a răspunde, am putea't transparent pentru a face cu orice dimensiune.
tr {
border-bottom:5em solid white;
}
Îmi dau seama că este un raspuns la un thread vechi și nu poate fi soluție a solicitat, dar în timp ce toate soluțiile sugerate nu face ceea ce am nevoie, această soluție a lucrat pentru mine.
Am avut 2 celule de tabel, unul cu fundal de culoare, cu o alta culoare de frontieră. Soluțiile de mai sus elimina graniță, astfel încât celula din dreapta-ar părea că plutește în aer.
Soluția pe care a făcut truc a fost de a înlocui masă
, tr
și td
cu divs și corespunzătoare clase: tabel ar fi div id="table_replacer"
, tr, ar fi div class="tr_replacer" și td-ar fi
div class="td_replacer"` (schimbare de închidere tag-uri pentru a divs la fel de bine, evident)
Pentru a obține soluția pentru problema mea css este:
#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}
Sper că acest lucru ajută cineva.