标签: html-table

是否有可能使表(具有动态创建的文本)具有例如:

表格宽度100%的屏幕5列最后一列是空的()前四列有文本,宽度是动态的,最后一列是宽度的剩余部分而没有压缩前四列中的文本

到目前为止我有这个并且它压缩了我正试图避免的文本:

<table style="width:100%;" border="1">
<tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td style="width:100%;">&nbsp;</td>
</tr>
</table>

我不能使用"white-space:nowrap",因为如果有足够的文本,我希望文本包装.

编辑:"我只是喜欢[前四]列,如果我从表格标签中删除宽度属性,它们将是宽度.但仍然有表格的100%宽度."

有任何想法吗？CSS解决方案更好!

我有一张桌子:

<table border=1>
    <caption>This is a table.</caption>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

我希望它尽可能宽,同时仍然在每侧留下20px的余量.所以,我这样做了:

table{
    border-collapse:collapse;
    margin:20px;
    padding:0;
    width:100%;
}

但它最终是父级的宽度加上左侧额外的20px边距,导致出现垂直滚动条.有没有办法让它比父母的宽度小40px而不添加另一个元素来包围它？

jsfiddle:http://jsfiddle.net/pvHNM/

可能重复:
在jQuery中添加表行

我想在更改事件中向表中添加一个新行.这是我到目前为止:

$('#CourseID').change(function() {
    $('#CourseListTable > tr > td:last').append('<td>...</td>');
});

这是我的表:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>    
<table id="CourseListTable">
    <tr>
        <th>Course ID</th>
        <th>Course Section</th>
        <th>Level</th>            
    </tr>
    <tr>
        <td><select name="CourseID" id="CourseID"></select></td>
        <td><select name="CourseSection" id="CourseSection"></select></td>
        <td><select name="Level" id="Level"></select></td>            
    </tr>
</table>

我无法让它发挥作用.我在这里遗失了什么可以让任何人让我知道我的错误在哪里？

提前致谢.

TLDR:这是不允许的.

我在这里找到了答案:

h1允许的父元素:任何可以包含流元素的元素hgroup.

资料来源:https://www.w3.org/TR/html-markup/h1.html和https://www.w3.org/TR/html-markup/th.html

我有类似的东西

  <table><thead>
  <tr>
     <th>S.L.</th>
     <th>name</th>
  </tr>
 </thead>
<tbody>
  <tr>
     <td>1</td>
     <td>Ronaldo</td>
  </tr>
  <tr>
     <td>2</td>
     <td>Messi</td>
  </tr>
  <tr>
     <td>3</td>
     <td>Ribery</td>
  </tr>
  <tr>
     <td>4</td>
     <td>Bale</td>
  </tr>
</tbody>
 </table>

我想要的是排序的<tr>的<tbody>点击时th升序和根据以下或者降序th点击.

1. 因此,如果有人点击S.L th它,那么它会以降序显示表行,然后在每次点击时显示升序.
2. 单击时,Name th它应按降序显示名称,然后按升序显示各自的名称 S.L

这里是小提琴

我正在开发一个"现代"网站,我在使用CSS以使所有内容正确排列方面遇到了很多麻烦.如果我只是使用一张桌子,我觉得它们的布局会容易得多,但我一直在避免使用<table>标签,因为我被告知它们是"过时的"并且不是正确的做事方式.

可以使用表格吗？我如何确定表何时适合,何时应该使用CSS？我只是做更容易的事情吗？

有一个看起来像这样的表:

<table width="100%">
<tr id="header">
 <td colspan="2"></td>
</tr>
<tr id="center">
 <td id="left" style="width: 201px"></td>
 <td id="mainpage" style="width: 100%"></td>
</tr>
</table>

在除IE8之外的每个浏览器(包括IE7)中,"左"td都可以.在IE8中,它根据主页的内容超出了宽度.

我发布了一些截图,但这是我的第一篇帖子.

有什么想法吗？

我有一张桌子

<table id="rowclick2">
  <tbody>
    <tr >
      <td class="cb"><input type="checkbox" value="yes"></td>
      <td>row 1</td>
       <td>A</td>
    </tr>    
    <tr >
      <td class="cb"><input type="checkbox" value="yes" ></td>
      <td>row 2</td>
       <td>B</td>
    </tr>    
    <tr>
      <td class="cb"><input type="checkbox" value="yes"></td>
      <td>row 3</td>
      <td>C</td>  
    </tr>    
  </tbody>
</table>

我希望在每行单元格中(单击按钮时)检查其复选框的行

我试过过滤器

  $('#test').click(function(){

      $('#rowclick2 tr').filter(':has(:checkbox:checked)').each(
          //get row values
      );
    });

这很简单但我看不出我错过了什么......

这是jsfiddle链接......

我想放两个表(在同一页面上),它们应该以不同的方式呈现(即为每个表使用不同的CSS).可能吗？

我有一个HTML表格如下:

<table border="1">
    <tr>
        <td>Row with text</td>
    </tr>
    <tr>
        <td></td><!-- Empty row -->
    </tr>
</table>

当你运行它时,你会看到第二行是折叠的,但我更确切地说它是未折叠的,与第一行的高度相同.这样做的一种方法是放置一个 实体,如下所示:

<table border="1">
    <tr>
        <td>Row with text</td>
    </tr>
    <tr>
        <td>&nbsp;</td><!-- Empty row -->
    </tr>
</table>

有没有办法通过CSS使用第一个片段中的HTML来实现第二个结果？