为什么我的 html 不显示第三列

Question

我必须在第一行的第三列显示一个组合框。我当前的 html 代码有第一行包含 3 列。在第一列中，我有一个图像，在第二列中，我有一个文本，在第三列中，我再次有一个 table，其中包含 2 列，一个包含文本，另一列包含组合框。所以这都是关于第一行的，现在在第二行我只有 1 列，它呈现了一个具有列跨度的 google 地图。

我现在有两个问题：

第一行的第三列没有显示在给定的维度中（我不知道为什么？）为什么它只显示 2 列？如何让所有3列都显示在第一行。
如何在 Javascript 中针对该组合的选择更改创建事件？

我的代码是：

<body style="overflow:hidden;">
    <table border="1" style="width:100%">
        <tr>
            <td style="width:30%;max-width:30%;">
                <img src="Image.jpg" alt="Mountain View" style="width:100px;height:50px">
            </td>
            <td style="width:30%; max-width:30%;">
                <h2> List1 </h2>
            </td>
            <td style="width:30%; max-width:30%; ">
                <table border="1">
                    <tr>
                        <td>
                            <h2>List2: </h2>
                        </td>
                        <td>
                            <select name="example">
                                <option value="A">A</option>
                                <option value="B">A</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="mapCanvas"></div>
            </td>
        </tr>
    </table>
</body>

如何解决这两个问题？

Answer 1

那是因为你定义了一列有 2 个 colspans，第一个 table.

是 1*2 = 2columns

如果要显示第三列，请使用以下更改之一：

<tr>
    <td colspan="3">
        <div id="mapCanvas"></div>
    </td>
<tr>

或

<tr>
    <td colspan="2">
        <div id="mapCanvas"></div>
    </td>
    <td>
     &nbsp;
    </td>
<tr>

并且，在您的组合定义中添加 onChange：

<select name="example" onchange="alert(this.value)">
    <option value="A">A</option>
    <option value="B">A</option>
</select>

完整代码如下：

<body style="overflow:hidden;">
    <table border="1" style="width:100%">
        <tr>
            <td style="width:30%;max-width:30%;">
                <img src="Image.jpg" alt="Mountain View" style="width:100px;height:50px">
            </td>
            <td style="width:30%; max-width:30%;">
                <h2> List1 </h2>
            </td>
            <td style="width:30%; max-width:30%; ">
                <table border="1">
                    <tr>
                        <td>
                            <h2>List2: </h2>
                        </td>
                        <td>
                            <select name="example" onchange="myfunction(this.value)">
                                <option value="A">A</option>
                                <option value="B">B</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="mapCanvas"></div>
            </td>
            <td>
             &nbsp;
            </td>
        <tr>
    </table>
</body>

编辑： 改变onchange:

<select name="example" onchange="myfunction(this.value)">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

将此添加到您的其余代码中：

<script>
  function myfunction(val){
    if(val == "A") 
      fnA();
    els if(val == "B") 
      fnB();
  }
  function fnA(){
    alert("This is the function for A");
  }
  function fnB(){
    alert("This is the function for B");
  }
// you can call fnA(); here as it is your default selection and call it by default.
</script>

Answer 2

第一个问题试试这个...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<table width="100%" border="1">
  <tr>
 <td><img src="#" alt="Your Image" /></td>
 <td>Your Text goes here</td>
 <td>

    <table width="100%">
<tr>
<td>Your Text here</td>
<td>

    <select name="example">
         <option value="A">A</option>
         <option value="B">A</option>
    </select>

 </td>
</tr>
</table>


 </td>
</tr>
</table>

</body>
</html>

为什么我的 html 不显示第三列

Why my html don't show third column

html

javascript

css

html-table

multiple-columns