How to apply Bootstrap Table

  Kiến thức lập trình

I am working on fetching data from an API into table format using JavaScript. I received the data perfectly
ut cannot apply Bootstrap onto the table header part.

<!DOCTYPE html>
<head>
 
    <title>Sports Api</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>   
</head>
<body>
      <script>
            async function Sports(){
        let Api = "https://inshortsapi.vercel.app/news?category=sports";
        let result =await(await fetch(Api)).json();

            document.write(`   <table class='table'>
                                <thead class='thead-dark'>
                                 <tr><th>SR NO</th>
                                     <th> AUTHOR NAME</th>
                                     <th>CONTENT</th>
                                     <th>DATE </th>
                                 </tr></thead>`);

        for(var i=0;i<result.data.length;i++)
       {
       
                                 document.write(`<tbody><tr>
                                        <td>${i+1}</td>
                                        <td>${result.data[i]["author"]}</td>
                                        <td>${result.data[i]["content"]}</td>
                                        <td>${result.data[i]["date"]}</td>
                                    </tr></tbody>`)
       }
       document.write("</table>")
        }
        Sports();
    </script>
</body>
</html>

I want to Table like this []

I didn’t get the result I wanted and got this type of table.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT