table responsive

@media screen and (max-width: 320px) {
     table {
       display: block;
       overflow-x: auto;     }
}

View another examples Add Own solution

4.33

Anne Hatfield 80 points

                                    &lt;table&gt;
	&lt;thead&gt;
	&lt;tr&gt;
		&lt;th&gt;First Name&lt;/th&gt;
		&lt;th&gt;Last Name&lt;/th&gt;
		&lt;th&gt;Job Title&lt;/th&gt;
	&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
	&lt;tr&gt;
		&lt;td&gt;James&lt;/td&gt;
		&lt;td&gt;Matman&lt;/td&gt;
		&lt;td&gt;Chief Sandwich Eater&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;The&lt;/td&gt;
		&lt;td&gt;Tick&lt;/td&gt;
		&lt;td&gt;Crimefighter Sorta&lt;/td&gt;
	&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;

Thank you! 9

4.33 (9 Votes)

Aarman 110 points

                                    Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table
------------------------------------------------------------
Striped Rows
The .table-striped class adds zebra-stripes to a table

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells
------------------------------------------------------------
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows
------------------------------------------------------------
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half
------------------------------------------------------------
Contextual Classes
Contextual classes can be used to color table rows (&lt;tr&gt;) or table cells (&lt;td&gt;)

The contextual classes that can be used are:

Class		Description
.active		Applies the hover color to the table row or table cell
.success	Indicates a successful or positive action
.info		Indicates a neutral informative change or action
.warning	Indicates a warning that might need attention
.danger		Indicates a dangerous or potentially negative action
------------------------------------------------------------
Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference

Sample code

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;title&gt;Bootstrap Example&lt;/title&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;
  &lt;h2&gt;Bootstrap Table Example&lt;/h2&gt;
  &lt;table class=&quot;table -----------&quot;&gt;  // try by adding different table class at this place =&gt; (&quot;-----------&quot;)
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Id&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Age&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Ram&lt;/td&gt;
        &lt;td&gt;10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Shyam&lt;/td&gt;
        &lt;td&gt;12&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;Ramesh&lt;/td&gt;
        &lt;td&gt;13&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;Suresh&lt;/td&gt;
        &lt;td&gt;11&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Thank you! 2

4 (2 Votes)

4.5

Native English speaker 95 points

                                    /* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a &quot;row&quot; */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: &quot;First Name&quot;; }
	td:nth-of-type(2):before { content: &quot;Last Name&quot;; }
	td:nth-of-type(3):before { content: &quot;Job Title&quot;; }
	td:nth-of-type(4):before { content: &quot;Favorite Color&quot;; }
	td:nth-of-type(5):before { content: &quot;Wars of Trek?&quot;; }
	td:nth-of-type(6):before { content: &quot;Secret Alias&quot;; }
	td:nth-of-type(7):before { content: &quot;Date of Birth&quot;; }
	td:nth-of-type(8):before { content: &quot;Dream Vacation City&quot;; }
	td:nth-of-type(9):before { content: &quot;GPA&quot;; }
	td:nth-of-type(10):before { content: &quot;Arbitrary Data&quot;; }
}

Thank you! 2

4.5 (2 Votes)

3.5

Delailah 125 points

                                    &lt;table class=&quot;table table-sm table-dark&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
      &lt;td&gt;Mark&lt;/td&gt;
      &lt;td&gt;Otto&lt;/td&gt;
      &lt;td&gt;@mdo&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
      &lt;td&gt;Jacob&lt;/td&gt;
      &lt;td&gt;Thornton&lt;/td&gt;
      &lt;td&gt;@fat&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
      &lt;td colspan=&quot;2&quot;&gt;Larry the Bird&lt;/td&gt;
      &lt;td&gt;@twitter&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

Thank you! 4

3.5 (4 Votes)

3.89

Janell 125 points

                                    /* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

Thank you! 9

3.89 (9 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Other

Other 2023-03-27 22:50:10 how to select the whole line in vscode with keyboard shortcut
Other 2022-03-27 22:45:24 income of a web developer
Other 2022-03-27 22:35:01 \pyrcc_main.py: File does not exist 'resources.qrc'
Other 2022-03-27 22:30:45 rick roll embed code
Other 2022-03-27 22:20:08 Circuit_04_Potentiometer
Other 2022-03-27 22:20:05 iterative power
Other 2022-03-27 22:15:11 flutter run all
Other 2022-03-27 22:10:05 when is karlson release
Other 2022-03-27 22:10:02 wp .htaccess example
Other 2022-03-27 22:00:08 bash pause in file read line by line

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

table responsive

Welcome Back!

Create a Free Account