Home Web Design CSS Responsive Table Detail View With Full Screen Modal | Table with Details

Responsive Table Detail View With Full Screen Modal | Table with Details

April 20, 2020

6430

How we can create a table with details view using HTML CSS JS? Solution: See this Responsive Table Detail View With Full Screen Modal, Table with Details.

Previously I have shared some table programs, but it is a little different because it has a detail view with the full-screen modal layout. Basically, A table is an arrangement of data in rows and columns, or possibly in a more complex structure. And we store different types of data like user’s information, order history, etc in the table. But a table can contain data according to the width of the device, we can’t put everything in the table. It will break the structure of the table and maybe of the whole website. That’s why we use a details view section in the table, where you can see all the data in a separate section.

Today you will learn to create a table with details view. Basically, there is a table with few rows and 3 columns where some dummy data available. There is a name section, email section, and a button for details views. When you will click on the details button a full-screen modal will appear, where you will see all the data. And in the top-right side of the modal, there is a close button for closing the detail view. Both segments table and details view have a responsive design.

So, Today I am sharing Responsive Table Detail View With Full Screen Modal. There I have used HTML to create the layout, CSS for styling and animations, jQuery for toggle open/close the detail view. There are dummy table contents and single modal view details, you can create separate details for every table items. You can use this program on your website in frontend and backend also.

If you are thinking now how this table detail view program actually is, then see the preview given below.

Preview Of Full Screen Modal Table Details

See this video preview to getting an idea of how this table details program looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Responsive Table Detail View Source Code

Before sharing source code, let’s talk about it. First I have created the main section using HTML <main> tag and placed a table and other items inside it. Inside the table, I placed headings and 4 data rows with name, email, and detail button. After that, I have created a div section with class name ‘details’ for details modal view. Inside that, I have placed all the data. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. There I have pass data using HTML Data-* attribute. For the effects, I have used transform command and transition command. There I have used @media query to create a responsive design.

jQuery handling here only toggle on-off or open-close the detail view screen in the program. There I have used jQuery .toggleClass command to create the toggle effect. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Responsive Table with Detail View | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>
<h1>
  Users List
</h1>
<p>
  example table with detail view 
</p>
<main>
  <table>
    <thead>
      <tr>
        <th>
          User's Name
        </th>
        <th>
          E-mail
        </th>
        <th></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th colspan='3'>
          Year: 2020
        </th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td data-title='Provider Name'>
          John Doe
        </td>
        <td data-title='E-mail'>
          e-mail@test-email.com
        </td>
        <td class='select'>
          <a class='button' href='#'>
            Select
          </a>
        </td>
      </tr>
      <tr>
        <td data-title='Provider Name'>
          John Doe
        </td>
        <td data-title='E-mail'>
          e-mail@test-email.com
        </td>
        <td class='select'>
          <a class='button' href='#'>
            Select
          </a>
        </td>
      </tr>
      <tr>
        <td data-title='Provider Name'>
          John Doe
        </td>
        <td data-title='E-mail'>
          e-mail@test-email.com
        </td>
        <td class='select'>
          <a class='button' href='#'>
            Select
          </a>
        </td>
      </tr>
      <tr>
        <td data-title='Provider Name'>
          John Doe
        </td>
        <td data-title='E-mail'>
          e-mail@test-email.com
        </td>
        <td class='select'>
          <a class='button' href='#'>
            Select
          </a>
        </td>
      </tr>
    </tbody>
  </table>
  <div class='detail'>
    <div class='detail-container'>
      <dl>
        <dt>
          Provider Name
        </dt>
        <dd>
          John Doe
        </dd>
        <dt>
          E-mail
        </dt>
        <dd>
          email@example.com
        </dd>
        <dt>
          City
        </dt>
        <dd>
          Detroit
        </dd>
        <dt>
          Phone-Number
        </dt>
        <dd>
          555-555-5555
        </dd>
        <dt>
          Last Update
        </dt>
        <dd>
          May 15 2020
        </dd>
        <dt>
          Notes
        </dt>
        <dd>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
        </dd>
      </dl>
    </div>
    <div class='detail-nav'>
      <button class='close'>
        Close
      </button>
    </div>
  </div>
</main>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<head>

<title>Responsive Table with Detail View | Webdevtrick.com</title>

</head>

<body>

<h1>

Users List

</h1>

<p>

example table with detail view

</p>

<main>

<table>

<thead>

<tr>

<th>

User's Name

</th>

<th>

E-mail

</th>

</tr>

</thead>

<tfoot>

<tr>

Year: 2020

</th>

</tr>

</tfoot>

<tbody>

<tr>

John Doe

</td>

e-mail@test-email.com

</td>

Select

</a>

</td>

</tr>

<tr>

John Doe

</td>

e-mail@test-email.com

</td>

Select

</a>

</td>

</tr>

<tr>

John Doe

</td>

e-mail@test-email.com

</td>

Select

</a>

</td>

</tr>

<tr>

John Doe

</td>

e-mail@test-email.com

</td>

Select

</a>

</td>

</tr>

</tbody>

</table>

<dl>

<dt>

Provider Name

</dt>

<dd>

John Doe

</dd>

<dt>

E-mail

</dt>

<dd>

email@example.com

</dd>

<dt>

City

</dt>

<dd>

Detroit

</dd>

<dt>

Phone-Number

</dt>

<dd>

555-555-5555

</dd>

<dt>

Last Update

</dt>

<dd>

May 15 2020

</dd>

<dt>

Notes

</dt>

<dd>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

</dd>

</dl>

</div>

</button>

</div>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
* {
  box-sizing: border-box;
}

html.open, body.open {
  height: 100%;
  overflow: hidden;
}

html {
  padding: 40px;
  font-size: 62.5%;
}

body {
  padding: 20px;
  background-color: #5BB9B8;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  font-size: 1.6rem;
  font-family: 'Lato', sans-serif;
}

p {
  text-align: center;
  margin: 20px 0 60px;
}

main {
  background-color: #2C3845;
}

h1 {
  text-align: center;
  font-weight: 300;
}

table {
  display: block;
}

tr, td, tbody, tfoot {
  display: block;
}

thead {
  display: none;
}

tr {
  padding-bottom: 10px;
}

td {
  padding: 10px 10px 0;
  text-align: center;
}
td:before {
  content: attr(data-title);
  color: #7a91aa;
  text-transform: uppercase;
  font-size: 1.4rem;
  padding-right: 10px;
  display: block;
}

table {
  width: 100%;
}

th {
  text-align: left;
  font-weight: 700;
}

thead th {
  background-color: #202932;
  color: #fff;
  border: 1px solid #202932;
}

tfoot th {
  display: block;
  padding: 10px;
  text-align: center;
  color: #b8c4d2;
}

.button {
  line-height: 1;
  display: inline-block;
  font-size: 1.2rem;
  text-decoration: none;
  border-radius: 5px;
  color: #fff;
  padding: 8px;
  background-color: #4b908f;
}

.select {
  padding-bottom: 20px;
  border-bottom: 1px solid #28333f;
}
.select:before {
  display: none;
}

.detail {
  background-color: #BD2A4E;
  width: 100%;
  height: 100%;
  padding: 40px 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.detail.open {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.detail-container {
  margin: 0 auto;
  padding: 40px;
  max-width: 500px;
}

dl {
  margin: 0;
  padding: 0;
}

dt {
  font-size: 2.2rem;
  font-weight: 300;
}

dd {
  margin: 0 0 40px 0;
  font-size: 1.8rem;
  padding-bottom: 5px;
  border-bottom: 1px solid #ac2647;
  box-shadow: 0 1px 0 #c52c51;
}

.close {
  background: none;
  padding: 18px;
  color: #fff;
  font-weight: 300;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  line-height: 1;
  font-size: 1.8rem;
  position: fixed;
  right: 40px;
  top: 20px;
  -moz-transition: border 0.3s linear;
  -o-transition: border 0.3s linear;
  -webkit-transition: border 0.3s linear;
  transition: border 0.3s linear;
}
.close:hover, .close:focus {
  background-color: #a82545;
  border: 1px solid #a82545;
}

@media (min-width: 460px) {
  td {
    text-align: left;
  }
  td:before {
    display: inline-block;
    text-align: right;
    width: 140px;
  }

  .select {
    padding-left: 160px;
  }
}
@media (min-width: 720px) {
  table {
    display: table;
  }

  tr {
    display: table-row;
  }

  td, th {
    display: table-cell;
  }

  tbody {
    display: table-row-group;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  td {
    border: 1px solid #28333f;
  }
  td:before {
    display: none;
  }

  td, th {
    padding: 10px;
  }

  tr:nth-child(2n+2) td {
    background-color: #242e39;
  }

  tfoot th {
    display: table-cell;
  }

  .select {
    padding: 10px;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

/* Code By Webdevtrick ( https://webdevtrick.com ) */

* {

box-sizing: border-box;

}

html.open, body.open {

height: 100%;

overflow: hidden;

}

html {

padding: 40px;

font-size: 62.5%;

}

body {

padding: 20px;

background-color: #5BB9B8;

line-height: 1.6;

-webkit-font-smoothing: antialiased;

color: #fff;

font-size: 1.6rem;

font-family: 'Lato', sans-serif;

}

p {

text-align: center;

margin: 20px 0 60px;

}

main {

background-color: #2C3845;

}

h1 {

text-align: center;

font-weight: 300;

}

table {

display: block;

}

tr, td, tbody, tfoot {

display: block;

}

thead {

display: none;

}

tr {

padding-bottom: 10px;

}

td {

padding: 10px 10px 0;

text-align: center;

}

td:before {

content: attr(data-title);

color: #7a91aa;

text-transform: uppercase;

font-size: 1.4rem;

padding-right: 10px;

display: block;

}

table {

width: 100%;

}

th {

text-align: left;

font-weight: 700;

}

thead th {

background-color: #202932;

color: #fff;

border: 1px solid #202932;

}

tfoot th {

display: block;

padding: 10px;

text-align: center;

color: #b8c4d2;

}

.button {

line-height: 1;

display: inline-block;

font-size: 1.2rem;

text-decoration: none;

border-radius: 5px;

color: #fff;

padding: 8px;

background-color: #4b908f;

}

.select {

padding-bottom: 20px;

border-bottom: 1px solid #28333f;

}

.select:before {

display: none;

}

.detail {

background-color: #BD2A4E;

width: 100%;

height: 100%;

padding: 40px 0;

position: fixed;

top: 0;

left: 0;

overflow: auto;

-moz-transform: translateX(-100%);

-ms-transform: translateX(-100%);

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

-moz-transition: -moz-transform 0.3s ease-out;

-o-transition: -o-transform 0.3s ease-out;

-webkit-transition: -webkit-transform 0.3s ease-out;

transition: transform 0.3s ease-out;

}

.detail.open {

-moz-transform: translateX(0);

-ms-transform: translateX(0);

-webkit-transform: translateX(0);

transform: translateX(0);

}

.detail-container {

margin: 0 auto;

padding: 40px;

max-width: 500px;

}

dl {

margin: 0;

padding: 0;

}

dt {

font-size: 2.2rem;

font-weight: 300;

}

dd {

margin: 0 0 40px 0;

font-size: 1.8rem;

padding-bottom: 5px;

border-bottom: 1px solid #ac2647;

box-shadow: 0 1px 0 #c52c51;

}

.close {

background: none;

padding: 18px;

color: #fff;

font-weight: 300;

border: 1px solid rgba(255, 255, 255, 0.4);

border-radius: 4px;

line-height: 1;

font-size: 1.8rem;

position: fixed;

right: 40px;

top: 20px;

-moz-transition: border 0.3s linear;

-o-transition: border 0.3s linear;

-webkit-transition: border 0.3s linear;

transition: border 0.3s linear;

}

.close:hover, .close:focus {

background-color: #a82545;

border: 1px solid #a82545;

}

@media (min-width: 460px) {

td {

text-align: left;

}

td:before {

display: inline-block;

text-align: right;

width: 140px;

}

.select {

padding-left: 160px;

}

@media (min-width: 720px) {

table {

display: table;

}

tr {

display: table-row;

}

td, th {

display: table-cell;

}

tbody {

display: table-row-group;

}

thead {

display: table-header-group;

}

tfoot {

display: table-footer-group;

}

td {

border: 1px solid #28333f;

}

td:before {

display: none;

}

td, th {

padding: 10px;

}

tr:nth-child(2n+2) td {

background-color: #242e39;

}

tfoot th {

display: table-cell;

}

.select {

padding: 10px;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$('.button, .close').on('click', function(e) {
  e.preventDefault();
  $('.detail, html, body').toggleClass('open');
});

// Code By Webdevtrick ( https://webdevtrick.com )

$('.button, .close').on('click', function(e) {

e.preventDefault();

$('.detail, html, body').toggleClass('open');

});

That’s It. Now you have successfully created Responsive Table Detail View With Full Screen Modal, Table with Details. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

Supun December 22, 2020 At 4:28 pm

Hi there, I have applied this to react project and when the list load dynamically, this not work properly.
Any suggestion would be highly appreciate.

Reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Full Screen Modal Table Details

Responsive Table Detail View Source Code

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY