the width of the table body is narrower than the table itself

I'm working on a table that has a fixed first column and needs to be vertically scrollable. I'm almost there with my CSS code, but the table rows are not as wide as the columns and I'm unsure why this is happening.

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

table {
  height: 300px;
}

tbody {
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565110b130b17">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b7eab3a6a5aba287f6e9f5f6e9f6">[email protected]</a>/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th scope='col' data-sortable="true">Column 1</th>
          <th scope='col'>Column 2</th>
          <th scope='col'>Column 3</th>
          <th scope='col'>Column 4</th>
          <th scope='col'>Column 5</th>
          <th scope='col'>Column 6</th>
          <th scope='col'>Column 7</th>
          <th scope='col'>Column 8</th>
          <th scope='col'>Column 9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Conf</td>
          <td>even 20 trail A</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
        <tr>
          <td>Conf</td>
          <td>even 20 trail B</td>
          <td>True</td>
          <td>False</td>
          <td>0</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
          <td>True</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455409504546484164150a16150a15">[email protected]</a>/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfdd
  ........
</body>

</html>

javascripthtmlcss

Answer №1

This revised response, credited to @Cristian, offers a more streamlined approach than its predecessor. It eliminates the need for hardcoded sizing to ensure proper cell dimensions within the table, regardless of the viewport width.

The solution involves adjusting the overflow: auto property, originally set by bootstrap-table's CSS, which was causing issues with sticky table headers. By relocating the height: 300px declaration to the bootstrap table container (refer to the code example below), the header sticking functionality was restored.

An alternative workaround is to apply overflow: unset !important to the same container element, allowing the table to overflow into the document. However, this may lead to unsightly horizontal scrolling due to cell overflow.

Additionally, the first column of the table remains sticky and visible as the table is scrolled horizontally.

.table {
  position: relative;
  border-collapse: collapse;
}

.table th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 2;
}

.table tr > td:first-child, .table tr > th:first-child {
  background-color: #ad6c80;
  color: #373737;
  /* Remove this if you would not like the first column to "stick" */
  position: sticky;
  left: 0;
}
.table tr > th:first-child {
  z-index: 3;
}

/* This fixes the sticky headers not sticking */
.bootstrap-table .fixed-table-container .fixed-table-body {
  height: 300px!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a2b8a0b8a4">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d6e7f227b6e6d636a4f3e213d3e213e">[email protected]</a>/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th scope='col' data-sortable="true">Column 1</th>
          <th scope='col'>Column 2</th>
          <th scope='col'>Column 3</th>
          <th scope='col'>Column 4</th>
          <th scope='col'>Column 5</th>
          <th scope='col'>Column 6</th>
          <th scope='col'>Column 7</th>
          <th scope='col'>Column 8</th>
          <th scope='col'>Column 9</th>
          </th>
      </thead>
      <tbody>
        <!-- Table content goes here -->
      </tbody>
    </table>
  </div>

  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f5453545241500d5441424c4560110e12110e11">[email protected]</a>/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66040909121512140716265248504854">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });
  </script>
</body>

</html>

Answer №2

The code snippet below is incredibly simple and versatile, supporting both horizontal and vertical scrolling while maintaining the original structure specified by the OP. The only modification required is a slight adjustment to the z-index, necessary only for scenarios where sticky column headers and row headers are needed for both vertical and horizontal scrolling. This code has been tested successfully in Chrome and Firefox on Windows 10.

#myTable thead tr th,
#myTable tbody tr td:first-child {
  background-color: #ad6c80;
  color: #373737;
}

/*  Remove this if sticky column headers are not required for vertical scrolling  */
#myTable thead {
    position: sticky;
    top: 0px;
      /*  Ensure first column header is not scrolled over on vertical scroll  */
      /*  Only required if sticky row headers are also required  */
    z-index: 1;
}

/*  Remove this if sticky row headers are not required for horizontal scrolling  */
#myTable thead tr th:first-child {
    position: sticky;
    left: 0px;
}

/*  Remove this if sticky row headers are not required for horizontal scrolling  */
#myTable tbody tr td:first-child {
    position: sticky;
    left: 0px;
}

/*  For this example, force scrolling by overridding bootstrap  */
.bootstrap-table .fixed-table-container .fixed-table-body {
  height: 500px !important;
  width: 700px !important;
}
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcfce7e0e7e1f2e3d3a7bda5bda1">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabbe6bfaaa9a7ae8bfae5f9fae5fa">[email protected]</a>/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table id="myTable" class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th scope='col' data-sortable="true">Column 1</th>
          <th scope='col'>Column 2</th>
          <th scope='col'>Column 3</th>
          <th scope='col'>Column 4</th>
          <th scope='col'>Column 5</th>
          <th scope='col'>Column 6</th>
          <th scope='col'>Column 7</th>
          <th scope='col'>Column 8</th>
          <th scope='col'>Column 9</th>
        </tr>
      </thead>
      <tbody>
        // Insert table data here
      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c11485d5e50597c0d120e0d120d">[email protected]</a>/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101756f776f73">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });
  </script>
</body>

</html>

Answer №3

I trust this solution meets your requirements.

I have implemented the position style to the table, thead, and tbody, utilized z-index to ensure the header stays on top, and set default widths for the first td in the initial column as well as min-width for all th and td elements (feel free to adjust these widths as needed).

If you were anticipating a different outcome, please let me know and I'll explore alternate solutions.

table {
      position: relative;
      height: 300px;
    }

    .table th:first-child,
    .table td:first-child {
      position: sticky;
      left: 0;
      background-color: #ad6c80;
      color: #373737;
    }
    .table td:first-child {
      width: 130px;
    }

    thead {
      z-index: 10;
      top: 0;
      position: sticky;
      background-color: white;
    }
    thead th {
      min-width: 100px;
    }

    tbody {
      position: absolute;
    }
    tbody td {
      min-width: 100px;
    }
<!doctype html>
    <html>

    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790d170f170b">[email protected]</a>/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="462429293235323427366b3227242a2306776874776877">[email protected]</a>/dist/bootstrap-table.min.css">
    </head>

    <body>
      <div class="container">
        <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
          <thead>
            <tr>
              <th scope='col' data-sortable="true">Column 1</th>
              <th scope='col'>Column 2</th>
              <th scope='col'>Column 3</th>
              <th scope='col'>Column 4</th>
              <th scope='col'>Column 5</th>
              <th scope='col'>Column 6</th>
              <th scope='col'>Column 7</th>
              <th scope='col'>Column 8</th>
              <th scope='col'>Column 9</th>
            </tr>
          </thead>
          <body>
            <tr>
              <td>Conf</td>
              <td>even 20 trail A</td>
              <td>True</td>
              <td>False</td>
              <td>0</td>
              <td>True</td>
              <td>True</td>
              <td>True</td>
              <td>True</td>
            </tr>
            <!-- Additional rows omitted for brevity -->
          </tbody>
        </table>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafba6ffeae9e7eecbbaa5b9baa5ba">[email protected]</a>/dist/bootstrap-table.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b3a9b1a9b5">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
      </script>
      <script>
        $(document).ready(function() {
          $('table').bootstrapTable();
        });
      </script>
    </body>

    </html>

Answer №4

My strategy involves detailed comments in the CSS code to explain various aspects of the design.

In addition to the main concept, I have included corrections for the default behavior of HTML tables. Feel free to further enhance the design by adjusting borders, but this serves as a foundation for the approach.

/* The container style definitions */
.fixed-table-body {
  position: relative;
  height: 200px !important; /* Adjusted for Bootstrap container */
}

/* Table made absolute for consistent layout */
table {
  position: absolute;
}

/* First column made sticky to the left */
table th:first-child,
table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

/* Sticky headers styling */
th {
  position: sticky;
  z-index: 1;
  background: white;
}

table th:first-child {
  z-index: 2;
}

/* Optional fix for default behavior */
th {
  top: -1px;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Container for th elements with defined borders */
.th-inner {
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbafb5adb5a9">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fc29b8e8d838aafdec1dddec1de">[email protected]</a>/dist/bootstrap-table.min.css">
</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <th scope='col' data-sortable="true">Column 1</th>
          <th scope='col'>Column 2</th>
          <th scope='col'>Column 3</th>
          <th scope='col'>Column 4</th>
          <th scope='col'>Column 5</th>
          <th scope='col'>Column 6</th>
          <th scope='col'>Column 7</th>
          <th scope='col'>Column 8</th>
          <th scope='col'>Column 9</th>
        </tr>
      </thead>
      <tbody>

        <!-- Table data here -->

      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a3fea7b2b1bfb693e2fde1e2fde2">[email protected]</a>/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb9a3bba3bf">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });
  </script>
</body>

</html>

Answer №5

My innovative approach involves utilizing a sticky thead in CSS. When using position: sticky; in CSS, the element is initially relatively positioned until it hits a specific point, at which it transitions to being statically positioned. This means that the element's position remains unchanged as you scroll down until it reaches the viewport edge.

My solution is focused solely on CSS without any modifications to your HTML code. There is no horizontal scrolling present in my solution, and you'll notice that there isn't a separate vertical scrollbar for the table, preserving the cleanliness of the output. However, I did employ the use of !important; to override certain Bootstrap styles.

An alternate approach using Bootstrap is available as well: Sticky Header (bootstrap-table)

For further insight on sticky CSS, these resources will prove valuable: How TO - Sticky Element (w3schools) and Creating sliding effects using sticky positioning (css-tricks)

/*Table head and cells background color and text color*/
.table th:first-child,
.table td:first-child {
  background-color: #ad6c80;
  color: #373737;
}

/*Sticky table head with border bottom created using box-shadow*/
thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 9999;
  background: #fff;
  -moz-box-shadow: 0px 0.1px 0px #dee2e6;
  -webkit-box-shadow: 0 0.1px 0px #dee2e6;
  box-shadow: 0px 0.1px 0px #dee2e6;
}

table{
  position: relative;
}

/*Table head padding and text occupying*/
.th-inner {
    padding: 7% 7%;
    white-space: break-spaces;
}

.table td, .table th {
    padding: .25rem !important;
}

/*Overriding Bootstrap to align titles, padding, text overflow et cetera*/
.bootstrap-table .fixed-table-container .table thead th {
align-items: center !important;
vertical-align: middle !important;
}

.bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding: 15% 0% !important;
    vertical-align: middle !important;
    overflow: unset !important;
    text-overflow: unset !important;
    white-space: break-spaces !important;
      word-break: break-all !important;
    font-size: 1.8vw !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
    overflow-x: unset !important;
    overflow-y: unset !important;
}
<!--No changes have been done to HTML-->
<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2968c948c90">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455409504546484164150a16150a15">[email protected]</a>/dist/bootstrap-table.min.css">
  
  <link rel="stylesheet" href="style.css">


</head>

<body>
  <div class="container">
    <table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
      <thead>
        <tr>
          <!--Columns omitted for brevity-->
        </tr>
      </thead>
      <tbody>
        <!--Table rows omitted for brevity-->
      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b3eeb7a2a1afa683f2edf1f2edf2">[email protected]</a>/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394d574f574b">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });

  </script>
</body>

</html>

Answer №6

Here is a simple solution that you can try. Begin by eliminating the following lines of code:

table {
  height: 300px;
}

tbody {
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;}

Next, insert the desired height in the .fixed-table-container class:

.fixed-table-container {
    height: 400px;
}

That's it!

If you also wish to have a sticky header, include these lines of code:

thead tr{
    position:sticky;
    top:0;
    background:#fff
}

Answer №7

https://jsfiddle.net/kaxt5wpb/4/

All I did was delete the following CSS code:

tbody{
   overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The equivalent of an event listener in event handling

Here is an example of how to set up event listeners: document.getElementById("A").addEventListener("change", function (e) { // do something when A changes }, false) document.getElementById("B").addEventListener("click ...

javascriptdom-events

XPath allows for the selection of both links and anchors on a webpage

Currently, I am using Screaming Frog and seeking to utilize XPath for a specific task. My objective is to extract all links and anchors that contain a certain class within the main body content, excluding any links found within div.list. I have attempted ...

htmlxmlxpathweb-scraping

Discovering the current active link and anchor tag details using jQuery in an unordered list

I am currently utilizing jQuery to work with 4 anchor tags inside an unordered list, and I would like to be able to determine the "current active link" when a user performs a search. This way, I can execute my query based on the selected anchor tag. How ca ...

javascriptphpjquery

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

phphtmlcssresponsive

The innovative way Vue.js revolutionizes HTML updates within a Websocket onmessage event

I'm new to Vue.js and I'm trying to capture data inside the onmessage event of a websocket and update an HTML component (either a span or div). While console.log or alert functions work in onmessage, I couldn't get it to update the span. Th ...

javascripthtmlvue.js

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

I am looking to create a product catalog with 1-4 products in a row, each displayed in a box with details and prices. I would like to be able to generate the catalog easily using an XML/CSV file that can be updated. Can anyone provide guidance on how to ac ...

javascriptcssxmlcsv

Styling elements with CSS to create horizontal and vertical lines between them

Struggling to replicate the design elements from this image using CSS. Specifically, I need help creating a horizontal yellow line over the title "nossos numeros" and vertical blue lines between "Cursos", "Alunos", and "Aulas". I am working with Bootstrap ...

csstwitter-bootstrap-4

Is it possible for the NextJS Client component to only receive props after rendering props.children?

Encountering a puzzling issue that has me stumped... In my setup, I have a server side component that fetches data and then sends it over to the client component, which is all pretty standard. Here's where things get weird... When I log the data on ...

javascriptreactjsnext.jsapp-router

A guide on utilizing webpack devServer proxy within a create react app

Currently, I am in the process of developing a new application with create-react-app and I am looking to incorporate some proxies into my code. In the past, I utilized webpack's devServer for this purpose. module.exports = { ... devServer: { ...

javascriptreactjswebpackcreate-react-app

Bring in camera from gltf

Can someone provide guidance on utilizing a camera from gltf within three-js? I am currently implementing the gltf loader as demonstrated in this example. ...

javascriptthree.js

Waiting for the result of an AngularJS promise

When I click a button in my AngularJS app, the following code is executed: if (!$scope.isChecked) { $scope.getExistingName($scope.userName).then(function (data) { $scope.userName = data; }); } // Additional processing code foll ...

javascriptangularjs

At what browser width does Bootstrap's container no longer display a border?

I'm in the process of creating a flexible website design. https://i.sstatic.net/68qW2.png Everything seems to be going well so far. Here's what I have: <div class="container"> <div class="products-block"> <h2>Prod ...

htmlcsstwitter-bootstrap

The search function in Select2 is not displaying the desired result

I'm encountering an issue with the search functionality when it uses Ajax to load data from a JSON file. For example, if I search for Yemen, the record for Yemen does not get selected or highlighted properly. Here is the complete source code - could ...

javascriptjsonjquery-select2

Creating a shadow effect within an element: a step-by-step guide

I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...

htmlcss

How can I arrange selected options at the top in MUI autocomplete?

I am currently working with mui's useAutocomplete hook https://mui.com/material-ui/react-autocomplete/#useautocomplete Is there a way to programmatically sort options and place the selected option at the top using JavaScript sorting, without resorti ...

javascripttypescriptmaterial-ui

Making Bootstrap Carousel images slide seamlessly

Can someone help me with implementing Bootstrap carousel slides that display gif short clips when transitioning to the next page? I've searched through Bootstrap documentation and Stack Overflow for solutions, but I can't seem to get the slide to ...

htmlbootstrap-4

Why is it difficult to display data fetched through getJSON?

The test-json.php script retrieves data from the database and converts it into JSON format. <?php $conn = new mysqli("localhost", "root", "xxxx", "guestbook"); $result=$conn->query("select * From lyb limit 2"); echo '['; $i=0; while($row ...

javascriptjsonajaxgetjson

Creating a Dynamic Login Panel Using HTML, CSS, and Jquery

Designing a dynamic sliding login panel utilizing Html, CSS, and jquery alongside various plugins. Check it out here: http://24.125.42.135/ When activated, the bar smoothly pushes down the content (click on the login option at the top right corner). This ...

javascriptjqueryhtmlcss

Sorting information in the React Native Section List

Working with React Native's SectionList and filtering data: data: [ { title: "Asia", data: ["Taj Mahal", "Great Wall of China", "Petra"] }, { title: "South America", data: ["Machu Picchu", "Christ the Redeemer", "C ...

javascriptreactjsreact-nativereact-native-sectionlist

What is preventing me from setting a background image in Angular 13?

Trying a different approach based on advice from Stack Overflow, I attempted the following: <div [style.background-image]="'url(https://picsum.photos/200)'"></div> Unfortunately, this resulted in no effect and the image was ...

htmlcssangularimage