Ширина столбца html таблицы, фиксированная ширина во время создания страницы - PullRequest
Новая
       0

Ширина столбца html таблицы, фиксированная ширина во время создания страницы

1 голос
/ 06 декабря 2010

Если существует простой способ исправить ширину столбцов HTML-таблицы во время отображения страницы.Я НЕ хочу указывать ширину столбцов в пикселях или процентах в моем коде.Однако после создания страницы и определения ширины на основе исходного содержимого таблицы я не хочу, чтобы ширина изменялась, даже если изменяется размер содержимого ячейки.

Просто чтобы вы понимали, что яя пытаюсь сделать, если у меня есть содержимое ячейки изменить (с нормального на жирный, например), скажем, когда я наведу курсор на строку, размер столбцов изменится.Это выглядит довольно странно.

Ответы [ 3 ]

1 голос
/ 08 декабря 2010

Честно говоря, я не понимаю ответ, который вы дали на мой комментарий, но я все равно попытаюсь ответить: -)

Что вам может понадобиться, это заключить содержимое каждой ячейки вdiv (или некоторый другой элемент блока) и установите его ширину.Это должно ограничивать расширение ячеек, однако, как я уже намекал на мой комментарий, более широкий контент будет переполнен, что больше всего похоже на уродливый вид.Однако вы на самом деле не указали, что вы хотите, чтобы более широкий контент делал ... 

<style type="text/css">
    #the-table td .wrap {
       overflow: hidden; /* try different values for different effects */
    }
</style>

<script type="text/javascript">
    $(function(){
        $('#the-table th, #the-table td').wrapInner(function() {
           return $("<div/>").css("width", $(this).width() + "px");
        });
    });
</script>

Живой пример: http://jsfiddle.net/Vx5Zq/

Обратите внимание, как обрезается буква Fпри наведении.

0 голосов
/ 06 декабря 2010

Добавление некоторой ширины к вашему текущему tds остановит изменение размера, когда текст станет жирным.

Сначала установите вашу таблицу, используя css для фиксированного рендеринга: 

<style type="text/css">
    #mytable{ table-layout: fixed; }
</style>

Затем вы можете использоватьJQuery, чтобы добавить 2px ширины к вашему TDS, например, так: 

<script type="text/javascript">
    $(function(){
        $('#mytable td').each(function(){
            var $this = $(this) // cache this td
            // set style to 2px wider
            $this.css({ width: $this.outerWidth() + 2, height: $this.outerHeight() + 2 });
        })
    });
</script>
0 голосов
/ 06 декабря 2010

Я думаю, что это должно сработать (но не проверено): 

var w = $('#myTable td.leftCol').outerWidth();
$('#myTable td.leftCol').css({width: w+'px'});

[EDIT] 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                $("table td").each(
                    function() {
                        var w = $(this).outerWidth();
                        alert(w+'px');
                        w *= 2;
                        $(this).css({width: w+'px'});
                        alert(w+'px');
                    }
                );
            }
        );
    </script>
</head>
<body>
    <table>
        <tr>
            <td>abc</td>
            <td>def</td>
            <td>ghi</td>
        </tr>
    </table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...