2010-12-06 2 views
1

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

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

+0

Одна из причин, по которой вы не должны делать текст полужирным при наведении :-) Что вы ожидаете от более широкого текста? Переполнение? – RoToRa 2010-12-06 12:36:16

+0

уверен. если я могу заставить его делать то, что работает. потому что это не будет. в ячейке много места, просто каждая ячейка имеет разные количества текста, поэтому, когда текст становится полужирным, он изменяет отношения размера, необходимого для каждой ячейки, поэтому размер изменяется на пару пикселей ... Я думаю ... – kralco626 2010-12-06 12:43:14

ответ

1

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

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

<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

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

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> 
+0

не работал ... – kralco626 2010-12-06 12:33:27

+0

Это не поможет. Ширины на ячейке таблицы в основном обрабатываются как `min-width`. – RoToRa 2010-12-06 12:35:20

0

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

Сначала установите таблицу с помощью CSS фиксированного рендеринга:

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

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

<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> 
Смежные вопросы