Question

是否可以包装表行及其内容（tds）以使表保持响应？例如：

<table>
<tr>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
</tr>
<tr>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
</tr>
</table>

对于某些屏幕尺寸，这两行5可以变成两行4和一行2，或者三行3和一行1用于其他屏幕，依此类推？

尝试了浮动和内联样式，但行总是在下一行，并且永远不会相互冲洗，因此td区域看起来无缝。 我无法访问表结构的html ，因此我尝试使用CSS甚至Javascript / jQuery来定位它。

有什么想法吗？

Answer 1

table元素的设计不符合您的要求。您所询问的内容通常被称为响应式用户界面，我们为此提供了许多现成的解决方案。我强烈建议为此目的使用Bootstrap库/框架。

Bootstraps grid系统将允许您执行您要求的操作。如果您对此方法很少感兴趣，您可以阅读其他选项（Bootstrap以外的其他框架）以及here。

Answer 2

我总是这样做：

<强> CSS：

.row {
    width: 100%;
}
.row > div {
    float: left;
}
.w25 {
    width: 25%;
}
.w33 {
    width: 33.333333%;
}
.w50 {
    width: 50%;
}

如果您愿意，可以添加更多。在此css之后，您可以随时拨打电话。

<div class="row">
    <div class="w50">1</div>
    <div class="w50">2</div>
</div>

在您的情况下（5个单元格），您可以将.w20 {width:20%;}添加到css中，以便在html中使用<div class="w20></div>"。

使用此方法只有一个小缺点。无论何时创建表，行和单元格，单元格都会根据内容进行划分。但是用我的方法，它们总是20％，50％或其他。

另一种选择是使用flex，但正如您所看到的here，并非所有浏览器都支持此功能。

Answer 3

1）出于您的目的，您可以使用不同类型的表格，并根据屏幕大小显示/隐藏其中一些表格以下是您案例的解决方案：

HTML：

＆＃13;

SELECT c.id, c.name, d.title, u.name
FROM components c 
INNER JOIN publications p ON c.id = p.component_id
INNER JOIN documents d ON d.id = p.document_id
INNER JOIN users u ON d.user_id = u.id
AND u.brand_id IN (39, 41)

＆＃13;

.table-xs {
  display: none;
  border: 1px solid black;
}

.table-xs td {
  border: 1px solid blue;
  text-align: center;
}

@media (max-width: 540px) {
  .table-xs {
    display: table;
  }
}

/* === medium === */
.table-md {
  display: none;
  border: 1px solid black;
}

.table-md td {
  border: 1px solid red;
  text-align: center;
}

@media (min-width: 541px) and (max-width: 720px) {
  .table-md {
    display: table;
  }
}

/* === large === */
.table-lg {
  display: none;
  border: 1px solid black;
}

.table-lg td {
  border: 1px solid green;
  text-align: center;
}

@media (min-width: 721px) {
  .table-lg {
    display: table;
  }
}

＆＃13;

2）您可以使用flexbox而不是table

Answer 4

如果您无法访问该表，则可以根据屏幕大小重新呈现该表。

您可以尝试这样的事情：

＆＃13;

function renderTable() {
  var myTable = $('#myTable');
  var content_var = ["content01", "content02",
                "content03", "content04",
                "content05", "content06",
                "content07", "content08",
                "content09", "content10"];
  var html_lgTable = `
  <table>
    <tbody>
    <tr>
      <td> ${content_var[0]} </td> 
      <td> ${content_var[1]} </td> 
      <td> ${content_var[2]} </td> 
      <td> ${content_var[3]} </td> 
      <td> ${content_var[4]} </td> 
    </tr>
     <tr>
      <td> ${content_var[5]} </td> 
      <td> ${content_var[6]} </td> 
      <td> ${content_var[7]} </td> 
      <td> ${content_var[8]} </td> 
      <td> ${content_var[9]} </td> 
    </tr>
    </tbody>
  </table>`

  var html_mdTable = `
  <table>
    <tbody>
    <tr>
      <td> ${content_var[0]} </td> 
      <td> ${content_var[1]} </td> 
      <td> ${content_var[2]} </td> 
      <td> ${content_var[3]} </td> 
     </tr>
     <tr>
      <td> ${content_var[4]} </td> 
      <td> ${content_var[5]} </td> 
      <td> ${content_var[6]} </td> 
      <td> ${content_var[7]} </td> 
    </tr>
    <tr>
      <td colspan="2"> ${content_var[8]} </td> 
      <td colspan="2"> ${content_var[9]} </td> 
    </tr>
    </tbody>
  </table>`

  var html_xsTable = `
  <table>
    <tbody>
    <tr>
      <td> ${content_var[0]} </td> 
      <td> ${content_var[1]} </td> 
      <td> ${content_var[2]} </td> 
     </tr>
     <tr>
      <td> ${content_var[3]} </td> 
      <td> ${content_var[4]} </td> 
      <td> ${content_var[5]} </td> 
    </tr>
    <tr>
      <td> ${content_var[6]} </td> 
      <td> ${content_var[7]} </td> 
      <td> ${content_var[8]} </td> 
    <tr>
      <td colspan="3"> ${content_var[9]} </td> 
    </tr>
    </tbody>
  </table>`

  var windowW  = $(window).innerWidth();
  
  if (windowW < 500) {
    $('#myTable').html(html_xsTable);  
  }
  else if ((windowW > 500) && (windowW < 900)) {
    $('#myTable').html(html_mdTable);  
  }
  else $('#myTable').html(html_lgTable);
 }

$(document).ready(function() {
  renderTable();
  $(window).on("resize", function() {
       renderTable();
  })
});

＆＃13;

table {
  display: table;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
  text-align: center;
}

＆＃13;

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<table id="myTable">
</table>

＆＃13;

当然，应该从原始表中解析content_var数组。

是否可以响应地包装表行？

4 个答案: