html-css > Θέλω να κάνω border το πρώτο κελί ανάμεσα απο 4 πίνακες

merchenary · 28 Αυγούστου 2019

.table {
            border-collapse: collapse;
            width: 100%;
        }
        tr:first-child {
        border: 10px solid gray;
        }

Βάζω τον παραπάνω κώδικα, αλλά μου κάνει border όλα τα πρώτα κελιά απο 4 πίνακες που χρησιμοποιούν την κλάση table...

Πώς θα κάνω μόνο τον 3 πίνακα στο πρώτο κελί?

Haldol · 28 Αυγούστου 2019

Με τον :nth-child(x) selector.

Θα εφαρμόσεις δηλαδή τον κώδικά σου, στο :nth-child(3) του .table.

merchenary · 28 Αυγούστου 2019

51 λεπτά πριν, Haldol είπε

Με τον :nth-child(x) selector.

Θα εφαρμόσεις δηλαδή τον κώδικά σου, στο :nth-child(3) του .table.

Φίλε δες το παρακάτω κώδικα, πως θα το κάνω να κάνει border μονο το

HTML Table 2

?

<!DOCTYPE html>
<html>
<head>
<style>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 3px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(1) {
  border: 4px solid gray;
  background-color: yellow;
}
</style>
</head>
<body>
<h2>HTML Table 2</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>HTML Table 1</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>

Επεξ/σία 28 Αυγούστου 2019 από merchenary

PC_MAGAS · 28 Αυγούστου 2019

Δοκίμασε για τέτοιου είδους εξεραίσεις να κάμνεις (κατα typo Κυπριακή διάλεκτος) μια ειδική κλάση:

.importantCell{
   border: 10px solid gray !important;
}

Έτσι η Html σου θα είναι:

<!DOCTYPE html>
<html>
<head>
<style>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 3px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(1) {
  border: 4px solid gray;
  background-color: yellow;
}

.importantCell{
   border: 10px solid gray !important;
}
</style>
</head>
<body>
<h2>HTML Table 2</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="importantCell">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>HTML Table 1</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>

Δηλαδή σαν έναrule of thumb κάνε specific κλάσεις για ότι δεν θες να είναι "ομοιόμορφο" και όριζέ τες explicitly στο element που θες.

merchenary · 28 Αυγούστου 2019

27 λεπτά πριν, PC_MAGAS είπε

Δοκίμασε για τέτοιου είδους εξεραίσεις να κάμνεις (κατα typo Κυπριακή διάλεκτος) μια ειδική κλάση:


.importantCell{
   border: 10px solid gray !important;
}

Έτσι η Html σου θα είναι:


<!DOCTYPE html>
<html>
<head>
<style>

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 3px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(1) {
  border: 4px solid gray;
  background-color: yellow;
}

.importantCell{
   border: 10px solid gray !important;
}
</style>
</head>
<body>
<h2>HTML Table 2</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="importantCell">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>HTML Table 1</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>

Δηλαδή σαν έναrule of thumb κάνε specific κλάσεις για ότι δεν θες να είναι "ομοιόμορφο" και όριζέ τες explicitly στο element που θες.

Δουλεύει φιλαράκι το έβαλα στο tr βέβαια, σε ευχαριστώ...

Επεξ/σία 28 Αυγούστου 2019 από merchenary

MastroGiannis · 29 Αυγούστου 2019

Επίσης, μπορείς να εισάγεις τους κανόνες του style άμεσα (inline) στην ετικέτα του στοιχείου:

<tr style="border: 4px solid gray; background-color: yellow;">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

Φυσικά, χάνεις την ευελιξία της κλάσης αλλά είναι ένας άμεσος τρόπος.

Σύνδεση

html-css > Θέλω να κάνω border το πρώτο κελί ανάμεσα απο 4 πίνακες

Προτεινόμενες αναρτήσεις

merchenary

Haldol

merchenary

PC_MAGAS

merchenary

MastroGiannis

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση