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

[Lanike71]

Καλησπέρα,

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

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

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

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

[Επισκέπτης]

Καλησπέρα.

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

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

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

 

Επεξ/σία 23 Ιανουαρίου 2021 από Επισκέπτης

[Lanike71]

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

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

[lennox32]

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

Γιώργος

[Lanike71]

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

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

padding: 1px 1px 1px 1px;

 

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

[lennox32]

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

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

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

padding: 1px 1px 1px 1px;

 

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

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

[Lanike71]

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

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

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

 

[lennox32]

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

[Lanike71]

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.

Αυτό μόνο