0

What would be CSS(3)-only way of making a table, that has mixture of fluid, content based and fixed width columns? Don't really care of supporting old browsers, IE9+ would be fine.

+----------------------+------+---------------+------+----------------------+----------------------+
| Content width column | 50xp | <-- Fluid --> | 20px | Content width column | Content width column |
+----------------------+------+---------------+------+----------------------+----------------------+

Fluid column is expected to have text-overflow: ellipsis property.

Or it's not even possible? What would be an alternative to tables? Floats?

The problem I'm getting is that I need to specify width of "content based column", and it applies the width property, which is lower than content: http://plnkr.co/edit/rqrpb8oMFDDyogXSon6y?p=preview

Aleksandr Makov
  • 2,820
  • 3
  • 37
  • 62

2 Answers2

0

In order to apply text-overflow: ellipsis to a table cell, I had to specify it explicitly at that cell along with max-width: 0.

The plunk is there: http://plnkr.co/edit/rqrpb8oMFDDyogXSon6y

Aleksandr Makov
  • 2,820
  • 3
  • 37
  • 62
0

I'll throw this out as an idea - FIDDLE.

CSS

ul li {
    display: inline-block;
}
.content {
    height: 40px;
    border: 1px solid black;
}
.spacer50 {
    width: 50px;
    height: 40px;
    background-color: red;
}
.spacer20 {
    width: 20px;
    height: 40px;
    background-color: green;
}

.fluidme {
    width: 20%;
    height: 40px;
    border: 1px solid green;
}
TimSPQR
  • 2,964
  • 3
  • 20
  • 29
  • Thanks for the effort. But it wraps into multiple lines, which I need to avoid. And problem with that approach, you still have to specify percentage for the width. While I have to drop some elements into table and expect them to be wrapped as intended without knowing/specifying their geometry. – Aleksandr Makov Apr 28 '14 at 18:51
  • Then based on those critera, it looks like "a table it must be". – TimSPQR Apr 28 '14 at 19:32