Question

我试图模仿Responsive Data Table中的代码来重新格式化行垂直的表格。我的不同之处在于我只想要一行（一个编辑过的行）是垂直的，其余的是正常的。

＆＃13;

tr.utr {
  display: block;
  border: 1px solid #ccc;
}

td.utd {
  display: block;
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: 30%;
}

td.utd:before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 60%;
  padding-right: 10px;
  white-space: nowrap;
}

td.utd:nth-of-type(1):before {
  content: "First";
}

td.utd:nth-of-type(2):before {
  content: "Second";
}

td.utd:nth-of-type(3):before {
  content: "Third";
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Address</th>
      <th>Status</th>
      <th>Query</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan=3>Copy of https://css-tricks.com/responsive-data-tables/</td>
    </tr>
    <tr>
      <td>100 Central Ave.</td>
      <td>Listings</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr class="utr">
      <td class="utd">
        <input type="text" value="123 Main Street" style="width:200px">
      </td>
      <td class="utd"><select>
            <option value="1">Listings</option>
            <option value="2">Solds</option>
          </select></td>
      <td class="utd"><input type="checkbox" checked="checked"></td>
    </tr>
    <tr>
      <td>666 Oceanview Rd.</td>
      <td>Listings</td>
      <td><input type="checkbox" checked="checked"></td>
    </tr>
  </tbody>
</table>

＆＃13;

这是我的小提琴：https://jsfiddle.net/ImTalkingCode/k1pcc1nh/4/

在小提琴中，内容标签（例如First）和输入字段都填充了30％，并且完全不像css-tricks示例那样对齐。有什么帮助吗？

Screenshot with the bug

Answer 1

基于您提供的css技巧的代码，我只是添加了我们需要的类。

调整屏幕/浏览器的大小以查看所需的效果。

Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	tr.utr { border: 1px solid #ccc;
             display: flex;
             flex-direction: column;}
	
	td.utd { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 30%; 
	}
	
	td.utd:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td.utd:nth-of-type(1):before { content: "First"; }
	td.utd:nth-of-type(2):before { content: "Second"; }
	td.utd:nth-of-type(3):before { content: "Third"; }
}

<table>
  <thead>
    <tr>
      <th>Address</th>
      <th>Status</th>
      <th>Query</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100 Central Ave.</td>
      <td>Listings</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr class="utr">
      <td class="utd">
        <input type="text" value="123 Main Street" style="width:100%">
      </td>
      <td class="utd"><select>
        <option value="1">Listings</option>
        <option value="2">Solds</option>
      </select></td>
      <td class="utd"><input type="checkbox" checked="checked"></td>
    </tr>
    <tr>
      <td>666 Oceanview Rd.</td>
      <td>Listings</td>
      <td><input type="checkbox" checked="checked"></td>
    </tr>
  </tbody>
</table>

如果您不希望它具有响应性，只需删除@media查询。

Answer 2

我认为这会对你有所帮助 https://jsfiddle.net/31rg4ued/

如果根据填充调整input元素的宽度，您将获得预期的输出

＆＃13;

tr.utr {
  display: block;
  border: 1px solid #ccc;
}
td.utd {
  display: block;
  border: none;
  border-bottom: 1px solid #eee;
  position: relative;
  
}
td.utd:before {
 
  
}
td.utd:nth-of-type(1):before {
  content: "First";
}
td.utd:nth-of-type(2):before {
  content: "Second";
}
td.utd:nth-of-type(3):before {
  content: "Third";
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Address</th>
      <th>Status</th>
      <th>Query</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100 Central Ave.</td>
      <td>Listings</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr class="utr" style="padding-left:30%">
  
      <td class="utd">
        <input type="text" value="123 Main Street" style="width:calc(100% - 30%)">
      </td>
      <td class="utd"><select>
        <option value="1">Listings</option>
        <option value="2">Solds</option>
      </select></td>
      <td class="utd"><input type="checkbox" checked="checked"></td>
    </tr>
    <tr>
      <td>666 Oceanview Rd.</td>
      <td>Listings</td>
      <td><input type="checkbox" checked="checked"></td>
    </tr>
  </tbody>
</table>

＆＃13;

填充左边不起作用

2 个答案: