Προς το περιεχόμενο

Βοήθεια σε css για html table


Lanike71

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

Καλησπέρα,

Ποιές είναι οι ιδιότητες σε css που κάνουν ένα table να έχει διαστάσεις ακριβώς όσο το περιεχόμενο και όχι παραπάνω;

Συγκεκριμένα έχω ένα πίνακα μέσα σε div, ο οποίος δημιουργείται δυναμικά με js. Παρ' όλο που το ορισμένο font είναι μικρό, ο πίνακας επιμένει στις διαστάσεις του.

Έχω ψάξει τα πάντα σε stack αλλά δε διορθώνεται.

Κάποια βοήθεια;

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημοσ. (επεξεργασμένο)

Καλησπέρα.

Στο bootstrap βάζεις την class .table-responsive .

Αμα δεν χρησιμοποιείς το bootstrap με αυτό το κώδικα μπορείς να το κάνεις responsive

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

 

Επεξ/σία από Επισκέπτης
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

To overflow-x : auto προσθέτει οριζόντιο scrollbar, κάτι που δεν το θέλω και το έχω θέσει hidden. Ακόμα και που δοκίμασα, πάλι έφτιαξε το μέγεθος που ήθελε και έκρυψε ένα κομμάτι του πίνακα, εμφανίζοντας το scrollbar.

Το responsive επίσης δε δούλεψε...

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Καλησπέρα φίλε!
Προτείνω να το βάλεις μέσα σε ένα div με class row με ένα col-md-12 μέσα του, και μέσα του να βάλεις το table.
Αυτό που περιγράφεις επάνω είναι απλά ένα style:width: 100%; στο table.
Απο την άλλη ίσως σε βοηθούσε να χρησιμοποιήσεις αυτό, το χρησιμοποιώ σε όλα μου τα έργα και είναι καταπληκτικό.
https://datatables.net/

Γιώργος

  • Like 1
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

@lennox32 Πραγματικά το DataTable δίνει πολλές δυνατότητες, αλλά λύση δεν ήταν αυτή τελικά.

Η λύση ήταν να δώσω στο td

padding1px 1px 1px 1px;
 
Ευχαριστώ όσους ασχολήθηκαν.
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

5 ώρες πριν, Lanike71 είπε

@lennox32 Πραγματικά το DataTable δίνει πολλές δυνατότητες, αλλά λύση δεν ήταν αυτή τελικά.

Η λύση ήταν να δώσω στο td

padding1px 1px 1px 1px;
 
Ευχαριστώ όσους ασχολήθηκαν.

Αδερφέ κάπου αλλού ήταν το πρόβλημα καθώς τα περιμετρικά κενά 1px στο κελί δεν έχουν ιδιαίτερη σχέση αλλά χαίρομαι που το έλυσες!

  • Like 1
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

4 λεπτά πριν, lennox32 είπε

Αδερφέ κάπου αλλού ήταν το πρόβλημα καθώς τα περιμετρικά κενά 1px στο κελί δεν έχουν ιδιαίτερη σχέση αλλά χαίρομαι που το έλυσες!

Δηλαδή by default όταν δημιουργείς ένα νέο απλό πίνακα με ή χωρίς bootstrap, παίρνει τις διαστάσεις που πρέπει;

 

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

1 λεπτό πριν, lennox32 είπε

Δεν είπα αυτό, είπα οτι τα περιμετρικά κενά στο td είναι άσχετα με το full width responsive του table.

Ρωτάω επειδή είμαι καινούργιος σε css.

Δηλαδή σε απλή html και css, με ή χωρίς bootstrap, πώς δημιουργείται ένας πίνακας που να έχει πλάτος και ύψος, όσο τα δεδομένα του;

Έψαχνα στο stack και η λέξη που έβρισκα συνέχεια ήταν tricky, tricky, tricky, tricky...Αυτό μόνο σε css μπορεί να συμβαίνει νομίζω.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Στις 23/1/2021 στις 3:10 ΜΜ, lennox32 είπε

Αυτό που περιγράφεις επάνω είναι απλά ένα style:width: 100%; στο table.

Αυτό μόνο

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

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

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

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

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...