Question

我试图在表格的网页中显示我的数据（来自elasticsearch）（最好是在数据表的最后）。在表格中，每个ID /文档应有1行。但是，文档包含数组字段（列）。假设我有2个相关的列，并且该列中的每个数组都有5个元素，我希望5个元素中的每一个在2列上对齐，要考虑到在1列中是一个长文本，而在另一列中是数字。

请参见以下示例：

$postId = $_GET['postId'];
$allposts = '';
$user_id = get_current_user_id();
$userPosts = get_user_meta( $user_id, 'save_post', TRUE );
$userPosts = explode(',', $userPosts);
$response = wp_remote_get('https://example.com/wp-json/wp/v2/posts?include='.$postId);
if ( is_wp_error( $response ) ) {
    return;
}
$posts = json_decode( wp_remote_retrieve_body( $response ) );
if ( empty( $posts ) ) {
    return;
}
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    if (isset($_POST['save_post'])) {
        array_push($userPosts, $postId);
        $userPosts = array_values(array_unique($userPosts));
        $userPosts = implode(',', $userPosts);
        $userPosts = trim($userPosts);
        $userPosts = ltrim($userPosts, ",");
        update_user_meta( $user_id, 'save_post', $userPosts );
    }
    if (isset($_POST['remove_post'])) {
        if (($key = array_search($postId, $userPosts)) !== false) {
            unset($userPosts[$key]);
        }
        $userPosts = implode(',', $userPosts);
        $userPosts = trim($userPosts);
        $userPosts = ltrim($userPosts, ",");
        update_user_meta( $user_id, 'save_post', $userPosts );
    }
}
if ( ! empty( $posts ) ) {
    // For each post.
    foreach ( $posts as $post ) {
        $allposts .= '<a href="' . esc_url( $post->link ) . '" target=\"_blank\">' . esc_html( $post->title->rendered ) . '</a>  ' . esc_html( $fordate ) . '<br />'.$post->content->rendered;
    ?>
    <div class="container margin-top-80 margin-bottom-80">
        <div class="row">
            <div class="col-8">
                <form id="savedPosts" action="" method="POST" class="" autocomplete="off">
                    <input type="hidden" name="save_post" value="<?php echo $postId; ?>"> 
                    <?php
                        $userPosts = implode(',', $userPosts);
                        if (strpos($userPosts, $postId) !== false) { ?>
                                <button disabled="disabled" type="submit" class="save_post disabled btn btn-outline-dark" data-toggle="tooltip" data-placement="top" title="già nei tuoi favoriti">Già nella box</button>
                                <button id="remove_post" name="remove_post" type="submit" class="save_post" data-toggle="tooltip" data-placement="top" title="aggiungilo alla tua box">Rimuovi dalla box</button>
                            <?php } else {   
                            ?>
                                <button id="save_post" name="save_post" type="submit" class="save_post" data-toggle="tooltip" data-placement="top" title="aggiungilo alla tua box">Salva nella box</button>
                        <?php  }
                    ?>
                </form>
            </div>
        </div>
    </div>
    <?php }
}
?>

该数据可作为python字典列表使用，而col1的输入将再次成为列表。

如果可能的话，如何实现这一目标（理想情况下没有嵌套表）？

Answer 1

* {
  margin: 0;
  padding: 0;
}

table {
  width: 80%;
}

th, td {
  border: 1px solid #000;
}

td {
  word-break: break-all;
  text-align: center;
}

.number-td {
  width: 20%
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table>
  <tr>
    <th>ID</th>
    <th>Number</th>
    <th>Text</th>
  </tr>
  <tr>
    <td width="50">
      1
    </td>
    <td class="number-td">
      1
    </td>
    <td>
      Text 1
    </td>
  </tr>
  <tr>
    <td width="50">
      2
    </td>
    <td class="number-td">
      2
    </td>
    <td>
      Text 2
    </td>
  </tr>
  <tr>
    <td width="50">
      3
    </td>
    <td class="number-td">
      3
    </td>
    <td>
      Text 3
    </td>
  </tr>
  <tr>
    <td width="50">
      4
    </td>
    <td class="number-td">
      4
    </td>
    <td>
      Text 4
    </td>
  </tr>
  <tr>
    <td width="50">
      5
    </td>
    <td class="number-td">
      5
    </td>
    <td>
      Text 5
    </td>
  </tr>
</table>
</body>
</html>

我在ID栏上保持width =“ 50”，在数字栏上我保持width：20％。您可以保留两者，也可以根据需要自定义！希望该解决方案对您有帮助

HTML / CSS表：在列上对齐“子行”

1 个答案: