Управление шириной столбцов таблицы

Question

Управление шириной столбцов таблицы

0

Это выглядело как простая задача, но в любом случае оказалось, что это сложно.

Таблица с одной строкой и двумя столбцами. Ширина стола должна быть 100%.

Столбец 1: Может содержать длинный текст. Должен отображаться только на одной строке, а текст переполнения должен быть обрезан. Ширина этой колонки должна быть шириной всей таблицы минус ширина столбца 2.

Столбец 2: Ширина правого столбца должна быть такой, чтобы текст точно соответствовал. Текст должен быть выровнен по правому краю.

Другими словами: текст столбца 2 определяет ширину двух столбцов.

Текст столбцов 1 и 2 динамический, поэтому абсолютная ширина не работает. Ширина всей таблицы должна быть шириной окна браузера, и это должно работать на всех современных браузерах, включая мобильные.

Я попытался использовать таблицу, и я попытался использовать только div. Оба подхода выглядят многообещающими, но я еще не совсем его решил.

Вот пример кода, который я пробовал: (проблема: таблица становится более 100% шириной, когда браузер узкий).

<table>
    <tr>
        <td class ="td1">
        This is a table. This is a very long text. Does it get clipped?
        </td>
        <td class ="td2">
            SHOW THIS
        </td>
    </tr>
</table>

Некоторые CSS, чтобы пойти с ним:

    table {
        width: 100%;
    }
    .td1 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    .td2 {
        white-space: nowrap;
        overflow: visible;
        text-align: right;
    }

Попытка с помощью div: (проблема: столбец 2 отброшен под столбцом 1)

<div class="div1">

    <div class="div2">
        This is a very long text in a div tag. Does it get clipped?
    </div>
    <div class="div3">
        SHOW THIS
    </div>
</div>

Некоторые CSS, чтобы пойти с ним:

    .div1 {
        display: inline-block;
        width: 100%;
    }
    .div2 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
    }
    .div3 {
        display: inline-block;
        white-space: nowrap;
        float: right;
    }

Для меня это выглядит тяжелой проблемой. Может ли кто-нибудь найти хорошее решение?

Обновить:

Вот весь html файл, поэтому всем проще попробовать:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
    .div1 {
        display: inline-block;
        width: 100%;
    }
    .div2 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
    }
    .div3 {
        display: inline-block;
        white-space: nowrap;
        float: right;
    }

    table {
        width: 100%;
    }
    .td1 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    .td2 {
        white-space: nowrap;
        overflow: visible;
        text-align: right;
    }
</style>

</head>
<body>

<div class="div1">

    <div class="div2">
        This is a very long text. Does it get clipped?
    </div>
    <div class="div3">
        SHOW THIS
    </div>
</div>
<br/><br/><br/>
<table>
    <tr>
        <td class ="td1">
        This is a table. This is a very long text. Does it get clipped?
        </td>
        <td class ="td2">
            SHOW THIS
        </td>
    </tr>
</table>

</body>
</html>

Vilhelm H. 03 окт. 2013, в 18:39

Источник

Теги:

html

css

html-table

2 ответа

Ещё вопросы

Danield · Answer 1 · 2014-01-04T19-09-00.000Z

Использование макета div:

FIDDLE

Разметка:

<div class="div3">
    SHOW THIS
</div>
<div class="div2">
    This is a very long text. Does it get clipped?
</div>

CSS

.div2 {
    overflow: hidden;
    white-space: nowrap;
}
.div3
{
    float:right;
}

user3153298 · Answer 2 · 2014-01-04T18-39-00.000Z

Это вариант?

<div style="position:relative;white-space:nowrap;overflow:hidden;">This is a table. This is a very long text. Does it get clipped?
    <div style="position:absolute;right:0;top:0;background:white;padding-left:5px;">SHOW THIS</div>
</div>