Databases
StackOverflow2013
Postsdbo
POStyling a table with fixed width columns and overflow text
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyling a table with fixed width columns and overflow text
    primarykey
    data
    text
    <p>I've got a &lt;table&gt; that contains a few columns whose textual value can be too long, therefore I wan't to "trim" them using "text-overflow: ellipsis" and "overflow: hidden" on the &lt;td&gt;'s in CSS. I noticed that in order for me to do that I have to set "table-layout: fixed" on the &lt;table&gt; which then forces me to specifically set every single column's width.</p> <p>I didn't want to apply a bunch of class names or IDs to the columns, so I used the following CSS solution:</p> <pre><code>#error-list th:nth-child(1), #error-list th:nth-child(6) { width: 53px; } #error-list th:nth-child(2) { width: 131px; } #error-list th:nth-child(3) { width: 226px; } #error-list td:nth-child(3), #error-list td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </code></pre> <p>The column list is fixed, so it isn't a big deal that I'm using the column's ordinal to style it, and I'm happy that the markup is leaner. This solution works great, but I wanted to ask whether there is a better solution.</p> <p>In order for the above to work, I had to set the column width's such that it took account for padding and border as well. That way it would work in IE, Chrome and FF. It feels pretty nasty doing it this way, but when I tried using "-webkit-box-sizing: content-box" (so I could set the column widths without having to also worry about padding/border), Chrome didn't respect it.</p> <p>Am I doing something wrong? Is there a better way? I don't mind having to hard-code every column width, but I hate having to use the border-box box-sizing.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJonathan Carter
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POStyling a table with fixed width columns and overflow text
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POStyling a table with fixed width columns and overflow text
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POStyling a table with fixed width columns and overflow text
      1. This table or related slice is empty.
      1. VTUpMod
    1. COJust a suggestion, how about you simply wrap the table in a <div> with overflow and let users scroll horizontally? That way you keep the table data intact.
      singulars
      1. POStyling a table with fixed width columns and overflow text
      1. USNeps
    2. COOne of the column's data could potentially be really long, which if left untrimmed would look really poor.
      singulars
      1. POStyling a table with fixed width columns and overflow text
      1. USJonathan Carter
    3. COCan you post some sample HTML illustrating how your table is constructed?
      singulars
      1. POStyling a table with fixed width columns and overflow text
      1. USKatieK
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload