Question

enter image description here

<!DOCTYPE html>


<html>


<head>



<style>


table 

{


border-collapse: collapse;


border-spacing: 0;


width: 100%;


border: 1px solid #ddd;


}

<table>

<tr>


<body>

<title>Hanagan</title>



<div class="someClass">


<table class="table-bordered">


<thead>


<tbody>



<table 

border="3">


<caption>Hiragana – Click for stroke order and sound</caption>

<tbody><tr>

<th>n</th>

<th>w</th>

<th>r</th>

<th>y</th>

<th>m</th>

<th>h</th>

<th>n</th>

<th>t</th>

<th>s</th>



</tr>

<tr align="center">

<td><img class="someClass"

title="Click to play the sound"

src="images/n.png" 

data-alt_src="gifimage/ん.gif"

data-sound="mp3/he.mp3"/><span>(n)</span></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/wa.png" 

data-alt_src="gifimage/え.gif"

data-sound="mp3/chi.mp3"/></td>





<td><img class="someClass"

title="Click to play the sound"

src="images/ra.png" 

data-alt_src="gifimage/え.gif"

data-sound="mp3/chi.mp3"/></td>


<td><img class="someClass"

title="Click to play the sound"

src="images/ya.png" 

data-alt_src="gifimage/や.gif"

data-sound="mp3/chi.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/a.png" 

data-alt_src="gifimage/gif1.gif"

data-sound="mp3/yo.mp3"/></td>


<td><img class="someClass"
             title="Click to play the sound"

src="images/to.png" 

data-alt_src="gifimage/と.gif"

data-sound="mp3/yo.mp3"/></td>


<td><img class="someClass"

title="Click to play the sound"

src="images/so.png" 

data-alt_src="gifimage/と.gif"

data-sound="mp3/yo.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/ko.png" 

data-alt_src="gifimage/け.gif"

data-sound="mp3/yo.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/o.png" 

data-alt_src="gifimage/お.gif"

data-sound="mp3/yo.mp3"/></td>

<th>o</th>


</tr>


</tbody>   


</table> 


</div>


<h2>Responsive Table</h2>


<p>If you have a table that is too wide, you can add a container 

element 


with overflow-x:auto around the table, and it will display a 

horizontal 


scroll bar when needed.</p>




<script>



$(".someClass").on({




"mouseenter": function(){



$(this).data("original_src",$(this).attr("src"));



$(this).attr("src",$(this).data("alt_src"));

},



"mouseleave": function(){



$(this).attr("src",$(this).data("original_src"));
          },



"click": function(){



var sound = $("<audio>").attr("src",$(this).data("sound"));


sound[0].play();

}

});


</script>

</body>   

</html>

Answer 1

检查完代码后，看来您有一个打开的 <style> ，它破坏了html文件中的所有内容。尝试关闭它，一切都会正常进行而不会重叠。

<html>  
<head>

     <title>Hanagan</title>

</head>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
</style>
<body>     
<table>          
<tr>   
<div class="someClass">   
<table class="table-bordered">      
<thead>      
<tbody>
<table border="3">

<caption>Hiragana – Click for stroke order and sound</caption>

<tbody><tr>

<th>n</th>

<th>w</th>

<th>r</th>

<th>y</th>

<th>m</th>

<th>h</th>

<th>n</th>

<th>t</th>

<th>s</th>

</tr>

<tr align="center">

<td><img class="someClass" title="Click to play the sound" src="images/n.png" data-alt_src="gifimage/ん.gif" data-sound="mp3/he.mp3"/>
<span>(n)</span></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/wa.png" 

data-alt_src="gifimage/え.gif"

data-sound="mp3/chi.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/ra.png" 

data-alt_src="gifimage/え.gif"

data-sound="mp3/chi.mp3"/></td>


<td><img class="someClass"

title="Click to play the sound"

src="images/ya.png" 

data-alt_src="gifimage/や.gif"

data-sound="mp3/chi.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/a.png" 

data-alt_src="gifimage/gif1.gif"

data-sound="mp3/yo.mp3"/></td>


<td><img class="someClass"
             title="Click to play the sound"

src="images/to.png" 

data-alt_src="gifimage/と.gif"

data-sound="mp3/yo.mp3"/></td>


<td><img class="someClass"

title="Click to play the sound"

src="images/so.png" 

data-alt_src="gifimage/と.gif"

data-sound="mp3/yo.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/ko.png" 

data-alt_src="gifimage/け.gif"

data-sound="mp3/yo.mp3"/></td>

<td><img class="someClass"

title="Click to play the sound"

src="images/o.png" 

data-alt_src="gifimage/お.gif"

data-sound="mp3/yo.mp3"/></td>

<th>o</th>


</tr>


</tbody>   


</table> 


</div>


<h2>Responsive Table</h2>


<p>If you have a table that is too wide, you can add a container 

element 


with overflow-x:auto around the table, and it will display a 

horizontal 


scroll bar when needed.</p>

<script>

$(".someClass").on({
"mouseenter": function(){   
$(this).data("original_src",$(this).attr("src"));
$(this).attr("src",$(this).data("alt_src"));       
},  
"mouseleave": function(){    
$(this).attr("src",$(this).data("original_src"));
          }, 
"click": function(){  
var sound = $("<audio>").attr("src",$(this).data("sound")); 
sound[0].play();        
}       
});

</script>

</body>   
</html>

Sample, Click Here

Answer 2

问题尚不清楚。我不确定您的标题是什么，或者应该在顶部还是底部。听起来这主要是一个布局问题。

可以举一个简化的例子吗？也许是这样的吗？ https://stackoverflow.com/help/how-to-ask

<section class='section-one'>

  <table>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </table>

</section>


<section class='section-two'>
  <p>Information</p>
</section>

https://jsfiddle.net/sheriffderek/m6bupLvy/

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

为什么我的标头一直在桌子后面？

2 个答案: