标签: html-table

这个问题的答案需要更新,因为浏览器已经改变

原始问题

我已经浏览了StackOverflow上的几篇帖子,但未能找到这个相当简单的问题的答案.

我有一个像这样的HTML结构:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

我需要的是div填充的高度td,所以我可以将div的背景(图标)定位在右下角td.

你怎么建议我去那？

如何删除HTML表的所有行,除了<th>使用Javascript,并且不循环遍历表中的所有行？我有一个非常庞大的表,我不想在我循环删除它们时冻结UI

我有一个JavaScript函数,它创建一个包含3行2个单元格的表.

谁能告诉我如何使用我的功能创建下表(我需要根据我的情况这样做)？

这是我的javascript和html代码,如下所示:

function tableCreate() {
  //body reference 
  var body = document.getElementsByTagName("body")[0];

  // create elements <table> and a <tbody>
  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  // cells creation
  for (var j = 0; j <= 2; j++) {
    // table row creation
    var row = document.createElement("tr");

    for (var i = 0; i < 2; i++) {
      // create element <td> and text node 
      //Make text node the contents of <td> element
      // put <td> at end of the …

看起来Chrome/Firefox不会渲染边框tr,但如果选择器是渲染边框则会渲染边框table tr td.

如何在tr上设置边框？

我的尝试,这不起作用:

table tr {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

这是一个类似的问题:设置边框到表tr,适用于IE 6和7以外的所有内容,但除了IE之外它似乎无处不在.

我试图阻止一个表格,其宽度明确地声明不会溢出它的父级div.我认为我可以用某种方式做到这一点max-width,但我似乎无法让这个工作.

以下代码(窗口非常小)将导致:

<style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi …

我在ASPX中创建了一个表.我想根据需求隐藏其中一列,但visibleHTML表格中没有属性.我怎样才能解决我的问题？

我正在尝试用HTML创建一个表.我有以下设计要创建.我在<tr>内部添加了一个<td>但不知何故,表格不是按照设计创建的.

任何人都可以建议我如何实现这一目标？

我无法创建Name1 | 价格1节.

我需要创建一个带有固定标题和固定第一列的html表(或类似的东西).

到目前为止我看到的每个解决方案都使用Javascript或jQuery设置scrollTop/scrollLeft,但它在移动浏览器上无法顺利运行,所以我正在寻找一个纯CSS解决方案.

我在这里找到了一个固定列的解决方案:jsfiddle.net/C8Dtf/20/但我不知道如何增强它以使标题也得到修复.

我想让它在webkit浏览器上工作或使用一些css3功能,但我再说一遍,我不想Javascript用于滚动.

编辑:这是我想要实现的行为的示例:https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

我有一个特殊而令人沮丧的问题.对于简单的标记:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

我将不同的背景颜色值应用于thead,tr和tr奇数元素.问题是在大多数浏览器中,每个单元格都有一个不需要的边框,这不是任何表格行的颜色.仅在Firefox 3.5中,表格在任何单元格中都没有边框.

我只想知道如何在其他主流浏览器中删除这些边框,以便您在表中看到的唯一内容是交替的行颜色.

有一个非常简单的方法我可以采用一组JSON对象并将其转换为HTML表,不包括几个字段？或者我是否必须手动完成此操作？