标签: css-tables

我的 HTML 页面的标题部分有一行由图标/文本/时间戳组成的行。我想让该行的图标和时间戳保持固定宽度，并且当浏览器调整大小时，我想通过显示省略号来减小文本 div（表格单元格）的大小。虽然我可以让省略号以固定宽度显示，但我希望文本 div（表格单元格）的宽度为 100%，直到浏览器变小，然后我希望此文本 div 变小并且省略号当这个 div 缩小时出现。

我可以使用媒体查询或动态调整大小的指令来解决这个问题，但我希望 HTML/CSS 可以解决它。

这可能吗？

这是一个示例： http: //jsfiddle.net/em83B/

<div style="display: table; table-layout: fixed;">
    <div style="display: table-cell; background: pink; min-width: 60px;">
        AAA
    </div>

    <div style="display: table-cell; background: yellow; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width: 300px; max-width: 600px;">
        This is the text I want to have truncated as the browser resizes
    </div>

    <div style="display: table-cell; background: lightblue; min-width: 100px;">
        CCC
    </div>
</div>

我有两个行数不同的浮动表（请参阅 JSFiddle）。

我希望两个表格具有相同的高度，而不需要将高度明确设置为例如 400px。我尝试将它们放入高度为 100% 的 div 容器中，正如这个问题的答案中所建议的那样，但这只会导致表格不再水平对齐。

有没有办法只使用 HTML 和 CSS 来实现这一点？

这是表格的 HTML 代码：

<table class="left">
    <tr>
        <th>Row1</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>        
    </tr>
        <tr>
        <th>Row2</th>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>        
    </tr>
        <tr>
        <th>Row3</th>
        <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu …

我有一个由表生成器构建的基本表。

我只需要增加第一个表列的大小。但是，下面的代码增加了第一列和第四列。

CSS

    table.paleBlueRows {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #FFFFFF;
  width: 85%;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}
table.paleBlueRows td, table.paleBlueRows th {
  border: 1px solid #0B6FA4;
  padding: 3px 2px;

}
table.paleBlueRows tbody td {
  font-size: 13px;
}
table.paleBlueRows td:nth-child(even) {
  background: #D0E4F5;
}
table.paleBlueRows thead {
  background: #0B6FA4;
  border-bottom: 3px solid #FFFFFF;
}
table.paleBlueRows thead th {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
  border-TOP: 2px solid #FFFFFF;
}
table.paleBlueRows …

假设我的动态 HTML 看起来像这样：

<table id="DanishCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
  <tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
  <tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
  <tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
  <tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
  <tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
  <tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

每个 tr 都有一个 ID，但 ID 仅对该表相对唯一，因为其他表可能有该 ID，并且行数可能会有所不同。

如何获取 id 为 17 的瑞典公司的成立年份（第 2 列）？

我想你会这样做，但我找不到正确的代码。

var table = document.getElementById("SwedishCompanies");
var row_index = ??? //should return 2
return table[row_index].cells[2].innerHTML;

我不能仅使用 getElementById 来获取 id“17”，因为我会冒获取丹麦或挪威公司的风险，因为这些表的顺序是随机的。

我在新重新设计的网站上遇到了CSS和/或表格的一些问题.由于众所周知的"100%div高度" - 我已经使用表格作为网站的结构元素.所以它看起来像这样:

HTML MARKUP:

<div id="header">...</div>
  <table>
  <tr>
    <td><div id="main">...</div></td>
    <td class="crighttd"><div id="cright">...</div></td>
   </tr>
</table>
<div id="footer">...</div>

和相应的CSS

table {
  border-top: 1px solid #6A6A6A;
  padding: 0;
  margin-top: 20px;
  border-spacing: 0
}

td {
  vertical-align: top;
  padding:0;
  margin:0
}

.crighttd {
  background: #4F4F4F;
  vertical-align:top;
  margin: 0
}

#cright {
  width: 185px;
  float: right;
  background: #4F4F4F;
  height: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 25px 0 25px 20px;
}

这里的问题是,显然右边的td在某些浏览器中根本不会显示(在Mac上以及IE的旧实例上看到过这种情况).这是一个CSS问题还是表格的东西？

有关问题请参阅截图:

上面的代码是由html生成的.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>SYM</title>
    <style type="text/css" media="all">
        @import "test.css";
    </style>
</head>
<body>
    <div id="container">
    <div class="round-box">
      <table class="round-box-layout">
        <thead><tr><td></td><td></td><td></td></tr></thead>
        <tbody><tr><td></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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate …

我有一个表的问题.我只想设置一个边框底部,我想在td之间没有间隙,我的css看起来像这样:

#questions td
{
    padding: 10px;
    border-bottom: solid thin black;
}

问题是我的表的ID.我已经尝试设置tr的边框底部,但这似乎什么都不做(至少在Chrome和Firefox中).我的表看起来像这样:

我正在尝试用CSS开发特别简单的布局,但没有成功.我想实现这样的目标:

BookImage        BookImage        BookImage
BookTitle        BookTitle        BookTitle

知道我有这个:

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }

问题是我没有得到我想要的东西.就像每个标签(<img>或<p></p>)被视为"列"一样.我想办法组<img>和<p>,把它们放在一起,并获得我的布局.我以为<div>可以做到,但我错了.

我已经能够冻结我的表头并且标题的宽度和其余行匹配,但是我无法从头部下方显示我的前两行.

table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    border-radius:3px;
    border-collapse:collapse;
    border-spacing: 0;
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:2px 2px 2px 2px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:2px 2px 2px …

我有一个包含复选框的特定行的表.我希望这些复选框与父td的中心对齐.我知道我可以通过样式化父td来实现这一目标:

td {
    text-align: center;
}

我也知道我可以用jQuery轻松实现这一点,但不幸的是,我不能使用jQuery.

该表是通过.NET创建的,我不能通过给出某个类来定位包含复选框的特定列.

我想知道是否有一种方式来设置复选框本身,以便将其与其父级td的中心对齐.

就像是:

input[type=checkbox] {
    margin: auto;
}