Πώς να αφαιρέσετε εντελώς τα σύνορα από τον πίνακα HTML

Ο στόχος μου είναι να δημιουργήσω μια σελίδα HTML που να μοιάζει με ένα "πλαίσιο φωτογραφιών". Με άλλα λόγια, θέλω να φτιάξω μια κενή σελίδα που περιβάλλεται από 4 εικόνες.

Αυτός είναι ο κώδικάς μου:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

Και οι κλάσεις CSS είναι οι εξής: "CSS":

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

Το πρόβλημά μου είναι ότι παίρνω λεπτές λευκές γραμμές μεταξύ των κελιών του πίνακα, εννοώ ότι το περίγραμμα των εικόνων δεν είναι συνεχές. Πώς μπορώ να αποφύγω αυτές τις λευκές γραμμές;

Brian Tompsett - 汤莱恩
Επεξεργασμένη ερώτηση Κάνε Νοέμβριος 2017 в 10:07
Προγραμματισμός
html css html-table background-image
Κάνε Απρίλιος 2011 в 2:39
3 προβολές
Λύση
<table cellspacing="0" cellpadding="0">

Και στο css:

table {border: none;}

EDIT: Όπως σημείωσε το iGEL, αυτή η λύση είναι επίσημα ξεπερασμένη (εξακολουθεί να λειτουργεί όμως), οπότε αν ξεκινάτε από το μηδέν, θα πρέπει να επιλέξετε τη λύση border-collapse του jnpcl's.

Στην πραγματικότητα δεν μου αρέσει αρκετά αυτή η αλλαγή μέχρι στιγμής (δεν δουλεύω συχνά με πίνακες). Κάνει κάποιες εργασίες λίγο πιο περίπλοκες. Π.χ. όταν θέλετε να συμπεριλάβετε δύο διαφορετικά σύνορα στο ίδιο σημείο (οπτικά), ενώ το ένα είναι TOP για μια γραμμή και το δεύτερο είναι BOTTOM για μια άλλη γραμμή. Θα καταρρεύσουν (= θα εμφανιστεί μόνο το ένα από αυτά). Τότε θα πρέπει να μελετήσετε πώς υπολογίζεται η "προτεραιότητα" των συνόρων και ποια στυλ συνόρων είναι "ισχυρότερα" (διπλά vs. συμπαγή κλπ.).

Μου άρεσε αυτό:

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

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Τώρα, με την κατάρρευση των συνόρων, αυτό δεν θα λειτουργήσει, καθώς αφαιρείται πάντα ένα σύνορο. Πρέπει να το κάνω με κάποιον άλλο τρόπο (υπάρχουν και άλλες λύσεις ofc). Μια πιθανότητα είναι η χρήση της CSS3 με τη σκιά box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​


.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​

Θα μπορούσατε επίσης να χρησιμοποιήσετε κάτι σαν "groove|ridge|inset|outset" στυλ περιγράμματος με μόνο ένα πλαίσιο. Αλλά για μένα, αυτό δεν είναι το βέλτιστο, επειδή δεν μπορώ να ελέγξω και τα δύο χρώματα.

Ίσως υπάρχει κάποια απλή και ωραία λύση για την κατάρρευση των συνόρων, αλλά δεν την έχω δει ακόμα και ειλικρινά δεν έχω αφιερώσει πολύ χρόνο σε αυτό. Ίσως κάποιος εδώ μέσα θα μπορέσει να μου/μας δείξει ;)

Damb
Επεξεργασμένη απάντηση Κάνε Νοέμβριος 2012 в 9:31
Σχόλια (2)

Για μένα έπρεπε να κάνω κάτι τέτοιο για να αφαιρέσω εντελώς τα όρια από τον πίνακα και όλα τα κελιά. Αυτό δεν απαιτεί καθόλου τροποποίηση της HTML, κάτι που ήταν χρήσιμο στην περίπτωσή μου.

table, tr, td {
    border: none;
}
Σχόλια (1)